@m4l/components 9.3.19-BE093025-beta.1 → 9.3.19-BE101025-beta.2

package/@types/types.d.ts

@@ -293,6 +293,7 @@ import {
   ImageTextSlotsType,
 } from '../components/ImageText/types';
 import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -381,6 +382,7 @@ declare module '@mui/material/styles' {
     M4LStepper: StepperSlotsType;
     M4LImageText: ImageTextSlotsType;
     M4LFormContainer: FormContainerSlotsType;
+    M4LEditLabel: EditLabelSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -468,6 +470,7 @@ declare module '@mui/material/styles' {
     M4LStepper: Partial<StepperOwnerState>;
     M4LImageText: Partial<ImageTextOwnerState>;
     M4LFormContainer: Partial<FormContainerOwnerState>;
+    M4LEditLabel: Partial<EditLabelOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -900,5 +903,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LFormContainer'];
       variants?: ComponentsVariants['M4LFormContainer'];
     };
+    M4LEditLabel?: {
+      defaultProps?: ComponentsPropsList['M4LEditLabel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LEditLabel'];
+      variants?: ComponentsVariants['M4LEditLabel'];
+    };
   }
 }

package/components/Card/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const CARD_KEY = "M4LCard";
-export declare const CARD_CLASSES: Record<string, string>;
+export declare const CARD_CLASSES: Record<"text" | "selected" | "outlined" | "root", string>;
 export declare const CARD_SIZES: {
     compact: number;
     standard: number;

package/components/Chip/constants.d.ts

@@ -18,4 +18,4 @@ export declare const COMBINED_CHIP_ENUMS: {
 /**
  * Inventario de clases CSS para el componente Chip
  */
-export declare const CHIP_CLASSES: Record<string, string>;
+export declare const CHIP_CLASSES: Record<"root" | "iconButton" | "closeIcon" | "skeletonChip" | "chipIcon" | "textChip", string>;

package/components/ContainerFlow/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
-export declare const CONTAINER_FLOW_CLASSES: Record<string, string>;
+export declare const CONTAINER_FLOW_CLASSES: Record<"root" | "wrapperItem", string>;
 export declare const CONTAINER_FLOW_GAP_VALUES: {
     compact: number;
     standard: number;

package/components/DataGrid/subcomponents/editors/EditLabelEditor/formatter.d.ts

@@ -0,0 +1,8 @@
+import { ColumnEditLabelFormatterProps } from './types';
+import { RenderCellProps } from 'react-data-grid';
+/**
+ * Formatter para mostrar un etiqueta en una columna de un DataGrid
+ * @param props - Propiedades del formatter
+ * @returns Componente EditLabelFormatter
+ */
+export declare const ColumnEditLabelFormatter: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => (renderProps: RenderCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/subcomponents/editors/EditLabelEditor/index.d.ts

@@ -0,0 +1,3 @@
+export { ColumnEditLabelFormatter } from './formatter';
+export { useColumnEditLabel } from './useColumnEditLabel';
+export type { ColumnEditLabelFormatterProps } from './types';

package/components/DataGrid/subcomponents/editors/EditLabelEditor/types.d.ts

@@ -0,0 +1,5 @@
+import { EditLabelFormatterProps } from '../../../../formatters/EditLabelFormatter';
+import { DeepKeyOf } from '../../../../../utils/types';
+export interface ColumnEditLabelFormatterProps<TRow> extends Pick<EditLabelFormatterProps, 'fieldWidth'> {
+    fieldLabel: DeepKeyOf<TRow>;
+}

package/components/DataGrid/subcomponents/editors/EditLabelEditor/useColumnEditLabel.d.ts

@@ -0,0 +1,9 @@
+import { ColumnEditLabelFormatterProps } from './types';
+/**
+ * Funcion helper que retorna el formatter, filter y customSort de la columna concatenada.
+ */
+export declare const useColumnEditLabel: <TRow>(props: ColumnEditLabelFormatterProps<TRow>) => {
+    formatter: (renderProps: import('react-data-grid').RenderCellProps<TRow, unknown>) => import("react/jsx-runtime").JSX.Element;
+    customFilter: (row: TRow, value: string | number) => boolean;
+    customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
+};

package/components/DataGrid/tests/helpers/types.d.ts

@@ -17,6 +17,7 @@ export interface SeedProps {
     withSetCheck?: boolean;
     withCesar?: boolean;
     withChipStatus?: boolean;
+    withEditLabel?: boolean;
     withActions?: boolean;
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
@@ -30,6 +31,7 @@ export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
 export interface RowType {
     id: string;
     name: string;
+    editLabel: string;
     filterableOnlyOne: string;
     email: string;
     phone: string;

package/components/EditLabel/EditLabel.d.ts

@@ -0,0 +1,7 @@
+import { EditLabelProps } from './types';
+/**
+ * Componente de texto editable con funcionalidades avanzadas.
+ * @param props - Las propiedades del componente
+ * @returns El componente EditLabel renderizado
+ */
+export declare const EditLabel: (props: EditLabelProps) => import("react/jsx-runtime").JSX.Element;

package/components/EditLabel/EditLabel.styles.d.ts

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

package/components/EditLabel/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const EDIT_LABEL_KEY_COMPONENT = "M4LEditLabel";
+export declare const EDIT_LABEL_CLASSES: Record<"icon" | "root" | "label" | "iconButton" | "textField" | "containerActions", string>;

package/components/EditLabel/hooks/useEditLabel.d.ts

@@ -0,0 +1,23 @@
+export interface UseEditLabelProps {
+    label: string;
+    onChange: (value: string) => void;
+}
+export interface UseEditLabelReturn {
+    inEdition: boolean;
+    value: string;
+    buttonSubmitRef: React.RefObject<HTMLButtonElement>;
+    buttonCancelRef: React.RefObject<HTMLButtonElement>;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    handleCancel: (event: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    handleEditStart: () => void;
+    handleInputClick: () => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Custom hook que maneja la lógica de estado y handlers para el componente EditLabel.
+ * @param props - Las propiedades del hook
+ * @returns El estado y handlers del EditLabel
+ */
+export declare const useEditLabel: ({ label, onChange, }: UseEditLabelProps) => UseEditLabelReturn;

package/components/EditLabel/icons.d.ts

@@ -0,0 +1,5 @@
+export declare const PATH_ICONS: {
+    EDIT: string;
+    ACCEPT: string;
+    CANCEL: string;
+};

package/components/EditLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { EditLabel } from './EditLabel';
+export type { EditLabelProps, EditLabelOwnerState } from './types';

package/components/EditLabel/slots/EditLabelEnum.d.ts

@@ -0,0 +1,8 @@
+export declare enum EditLabelSlots {
+    root = "root",
+    textField = "textField",
+    label = "label",
+    icon = "icon",
+    containerActions = "containerActions",
+    iconButton = "iconButton"
+}

package/components/EditLabel/slots/EditLabelSlots.d.ts

@@ -0,0 +1,18 @@
+export declare const EditLabelRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & 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 TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "slot" | "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" | "dataTestId" | "autoComplete" | "maxLength" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const LabelStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ContainerActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & 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 IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/EditLabel/test/EditLabel.test.d.ts

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

package/components/EditLabel/types.d.ts

@@ -0,0 +1,43 @@
+import { Sizes } from '@m4l/styles';
+import { EditLabelSlots } from './slots/EditLabelEnum';
+import { EDIT_LABEL_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export interface EditLabelProps {
+    /**
+     * The label to display
+     */
+    label: string;
+    /**
+     * The function to call when the label is changed
+     */
+    onChange: (value: string) => void;
+    /**
+     * The size of the label
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * The width of the input
+     */
+    fieldWidth?: string;
+}
+export interface EditLabelOwnerState {
+    /**
+     * The size of the label
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * The state of the edition
+     */
+    inEdition?: boolean;
+    /**
+     * The width of the input
+     */
+    fieldWidth?: string;
+}
+export type EditLabelSlotsType = keyof typeof EditLabelSlots;
+export type EditLabelStyles = M4LOverridesStyleRules<EditLabelSlotsType, typeof EDIT_LABEL_KEY_COMPONENT, Theme>;

package/components/FormContainer/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const FORM_CONTAINER_COMPONENT_KEY = "M4LFormContainer";
-export declare const FORM_CONTAINER_CLASSES: Record<string, string>;
+export declare const FORM_CONTAINER_CLASSES: Record<"root" | "formContainer" | "buttonGroup", string>;

package/components/GridLayout/subcomponents/GridItem/index.js

@@ -253,8 +253,8 @@ function GridItem(props) {
       }
       let { w: newW, h: newH } = calcWH(
         getPositionParams(),
-        size.width,
-        size.height,
+        size.width / transformScale,
+        size.height / transformScale,
         refProps.current.x,
         refProps.current.y
       );

package/components/Image/constant.d.ts

@@ -3,4 +3,4 @@ export declare const svgDataUriSkeleton = "data:image/svg+xml,%3Csvg width='36'
 /**
  * Clases de los slots del componente Image
  */
-export declare const IMAGE_CLASSES: Record<string, string>;
+export declare const IMAGE_CLASSES: Record<"root" | "intersectComponent" | "scrollIntersectRoot" | "skeletonComponent" | "divContainerSkeleton" | "imgSkeleton", string>;

package/components/ImageText/ImageText.styles.js

@@ -14,7 +14,7 @@ const imageTextContainerStyles = {
     padding: "10px",
     gap: theme.vars.size.baseSpacings.sp2,
     minHeight: "60px",
-    backgroundColor: theme.palette.background.default
+    backgroundColor: theme.vars.palette.background.default
   }),
   /**
    * Estilos para el contenedor de la imagen.

package/components/ImageText/constants.d.ts

@@ -5,7 +5,7 @@ export declare const IMAGE_TEXT_KEY_COMPONENT = "M4LImageText";
 /**
  * Clases del componente ImageTextContainer.
  */
-export declare const IMAGE_TEXT_CLASSES: Record<string, string>;
+export declare const IMAGE_TEXT_CLASSES: Record<"title" | "message" | "root" | "img" | "imageContainer" | "wrapperTitleMessage", string>;
 /**
  * URL de la imagen por defecto.
  */

package/components/MFIsolationApp/MFIsolationApp.js

@@ -4,15 +4,18 @@ import { unstable_HistoryRouter } from "react-router-dom";
 import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
 import NProgress from "nprogress";
-import { DeviceTypeProvider, LocalesProvider, getLocaleFromNetwork } from "@m4l/graphics";
+import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider, getLocaleFromNetwork } from "@m4l/graphics";
 import { EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation, AuthProvider } from "@m4l/core";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { c as createToaster } from "../ToastContainer/helpers/toaster.js";
 import { M as MFAuthApp } from "./subcomponents/MFAuthApp/MFAuthApp.js";
 import { B as BaseModule } from "../BaseModule/BaseModule.js";
+import { S as SettingsLayout } from "../SettingsLayout/SettingsLayout.js";
 import { T as ToastContainer } from "../ToastContainer/ToastContainer.js";
 import { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { A as AreasProvider } from "../areas/contexts/AreasContext/index.js";
+import { S as Stack } from "../mui_extended/Stack/Stack.js";
+import { A as AppBarSettings } from "./subcomponents/AppBarSettings/AppBarSettings.js";
 const history = createBrowserHistory({ window });
 function MFIsolationApp(props) {
   const {
@@ -39,7 +42,8 @@ function MFIsolationApp(props) {
     moduleDictionaryLoaded,
     forcedDeviceType,
     areasStoreId,
-    areasStoreDevtoolsEnabled
+    areasStoreDevtoolsEnabled,
+    appBarSettings = false
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback(
@@ -103,7 +107,7 @@ function MFIsolationApp(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(MFAuthApp, { user, pwd, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(MFAuthApp, { user, pwd, children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(
     BaseModule,
     {
       moduleId,
@@ -113,6 +117,7 @@ function MFIsolationApp(props) {
       moduleNameField,
       moduleDictionaryLoaded,
       children: /* @__PURE__ */ jsxs(AppearanceComponentProvider, { children: [
+        /* @__PURE__ */ jsx(SettingsLayout, {}),
         /* @__PURE__ */ jsx(ToastContainer, { containerId: toastContainerId }),
         " ",
         /* @__PURE__ */ jsx(
@@ -132,14 +137,17 @@ function MFIsolationApp(props) {
                 onSelectLayout: (modId) => {
                   console.log("onSelectLayout", modId);
                 },
-                children
+                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
+                  appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
+                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
+                ] })
               }
             )
           }
         )
       ] })
     }
-  ) }) }) }) }) }) }) }) });
+  ) }) }) }) }) }) }) }) }) });
 }
 export {
   MFIsolationApp as M

package/components/MFIsolationApp/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const PATH_ICONS: {
+    SETTINGS: string;
+};

package/components/MFIsolationApp/icons.js

@@ -0,0 +1,6 @@
+const PATH_ICONS = {
+  SETTINGS: "frontend/components/account_popover/assets/icons/configuration.svg"
+};
+export {
+  PATH_ICONS as P
+};

package/components/MFIsolationApp/subcomponents/AppBarSettings/AppBarSettings.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente base para la aplicación en modo de aislamiento
+ */
+export declare function AppBarSettings(): import("react/jsx-runtime").JSX.Element;

package/components/MFIsolationApp/subcomponents/AppBarSettings/AppBarSettings.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { P as PATH_ICONS } from "../../icons.js";
+import { useEnvironment } from "@m4l/core";
+import { S as Stack } from "../../../mui_extended/Stack/Stack.js";
+import { L as LanguagePopover } from "../../../LanguagePopover/LanguagePopover.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+function AppBarSettings() {
+  const handleOpen = useThemeSettingsStore((state) => state.settingsActions.handleOpen);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "40px", justifyContent: "space-between", flexDirection: "row", overflow: "hidden", position: "relative", padding: [0, 2], children: [
+    /* @__PURE__ */ jsx(Stack, { width: "100%", height: "100%" }),
+    /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", gap: 2, height: "100%", width: "auto", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(LanguagePopover, {}),
+      /* @__PURE__ */ jsx(IconButton, { src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.SETTINGS}`, onClick: handleOpen })
+    ] })
+  ] });
+}
+export {
+  AppBarSettings as A
+};

package/components/MFIsolationApp/subcomponents/AppBarSettings/index.d.ts

@@ -0,0 +1 @@
+export { AppBarSettings } from './AppBarSettings';

package/components/MFIsolationApp/subcomponents/AppBarSettings/index.js

@@ -0,0 +1 @@
+

package/components/MFIsolationApp/types.d.ts

@@ -13,6 +13,7 @@ export type MFIsolationAppProps = BaseModuleProps & {
     onLoad: () => void;
     activeAreasNetwork?: boolean;
     activeCookiesFromNetwork?: boolean;
+    appBarSettings?: boolean;
     /**
      * Diccionario de componentes, se puede proporcionar ya el diccionario cargado, para evitar que se llame al endpoint nuevamente.
      */

package/components/MFIsolationAppStorybook/MFIsolationAppStorybook.d.ts

@@ -0,0 +1,5 @@
+import { MFIsolationAppStorybookProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare function MFIsolationAppStorybook(props: MFIsolationAppStorybookProps): import("react/jsx-runtime").JSX.Element;

package/components/MFIsolationAppStorybook/MFIsolationAppStorybook.js

@@ -0,0 +1,154 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useId } from "react";
+import { unstable_HistoryRouter } from "react-router-dom";
+import { createBrowserHistory } from "history";
+import EventEmitter from "eventemitter3";
+import NProgress from "nprogress";
+import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider } from "@m4l/graphics";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider } from "@m4l/core";
+import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
+import enLocale from "date-fns/locale/en-US";
+import { c as createToaster } from "../ToastContainer/helpers/toaster.js";
+import { M as MFAuthAppStorybook } from "./subcomponents/MFAuthAppStorybook/MFAuthAppStorybook.js";
+import { B as BaseModule } from "../BaseModule/BaseModule.js";
+import { S as SettingsLayout } from "../SettingsLayout/SettingsLayout.js";
+import { T as ToastContainer } from "../ToastContainer/ToastContainer.js";
+import { A as AppBarSettings } from "./subcomponents/AppBarSettings/AppBarSettings.js";
+import { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
+import { A as AreasProvider } from "../areas/contexts/AreasContext/index.js";
+import { S as Stack } from "../mui_extended/Stack/Stack.js";
+const LOCALE_HOST_EN = {
+  lang: "en",
+  script: void 0,
+  region: "US",
+  name: "English US",
+  urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/commons/assets/icons/langs/lang_en.svg",
+  module: enLocale,
+  localeString: "en-US"
+};
+const history = createBrowserHistory({ window });
+function MFIsolationAppStorybook(props) {
+  const {
+    children,
+    database = "domain",
+    // 'domain
+    host_api_local,
+    host_api_icons = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/gclick/my_device_status/assets/icons",
+    //'https://dev1.gclick.co/api/v1/main/na/icons',
+    host_api_remote,
+    host_static_assets,
+    environment_assets,
+    moduleId,
+    skeletonFlags,
+    moduleNameField,
+    privileges,
+    componentsDictionary,
+    onLoad,
+    // observedDivRef,
+    moduleDictionaryLoaded,
+    forcedDeviceType,
+    areasStoreId,
+    areasStoreDevtoolsEnabled,
+    appBarSettings = false
+  } = props;
+  const eventEmitter = useMemo(() => new EventEmitter(), []);
+  const events_add_listener = useCallback(
+    (eventName, handler) => {
+      eventEmitter.on(eventName, handler);
+    },
+    [eventEmitter]
+  );
+  const events_remove_listener = useCallback(
+    (eventName, handler) => {
+      if (handler === null) {
+        eventEmitter.removeListener(eventName);
+        return;
+      }
+      eventEmitter.removeListener(eventName, handler);
+    },
+    [eventEmitter]
+  );
+  const events_emit = useCallback(
+    (eventName, arg) => {
+      eventEmitter.emit(eventName, arg);
+    },
+    [eventEmitter]
+  );
+  const startProgress = () => {
+    NProgress.configure({
+      showSpinner: true
+    });
+    NProgress.start();
+  };
+  const stopProgress = () => {
+    NProgress.done();
+  };
+  const environment = useMemo(
+    () => ({
+      host: "",
+      isLocalhost: true,
+      domain_token: "lab1",
+      database,
+      host_api_local,
+      host_api_icons,
+      host_api_remote,
+      host_static_assets,
+      environment_assets
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const toastContainerId = useId();
+  const toaster = createToaster(toastContainerId);
+  const hostTools = useMemo(
+    () => ({
+      history,
+      toast: toaster,
+      startProgress,
+      stopProgress,
+      events_add_listener,
+      events_remove_listener,
+      events_emit
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const mockNetworkOperation = useCallback(async (_networkProps) => {
+    return Promise.resolve({
+      data: [],
+      status: 200,
+      statusText: "OK"
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation: mockNetworkOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(MFAuthAppStorybook, { children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: true, localeHost: LOCALE_HOST_EN, children: /* @__PURE__ */ jsx(
+    BaseModule,
+    {
+      moduleId,
+      privileges,
+      skeletonFlags,
+      componentsDictionary,
+      moduleNameField,
+      moduleDictionaryLoaded,
+      children: /* @__PURE__ */ jsxs(AppearanceComponentProvider, { children: [
+        /* @__PURE__ */ jsx(SettingsLayout, {}),
+        /* @__PURE__ */ jsx(ToastContainer, { containerId: toastContainerId }),
+        " ",
+        /* @__PURE__ */ jsx(
+          PopupsProvider,
+          {
+            baseZindex: 1e3,
+            storeId: areasStoreId,
+            storeDevtoolsEnabled: areasStoreDevtoolsEnabled,
+            children: /* @__PURE__ */ jsx(AreasProvider, { loadAreasFromNetwork: false, loadCookiesFromNetwork: false, onLoad, children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
+              appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
+              /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
+            ] }) })
+          }
+        )
+      ] })
+    }
+  ) }) }) }) }) }) }) }) });
+}
+export {
+  MFIsolationAppStorybook as M
+};

package/components/MFIsolationAppStorybook/constants.d.ts

@@ -0,0 +1 @@
+export declare const TOAST_CONTAINER_ID = "toast-host";

package/components/MFIsolationAppStorybook/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const PATH_ICONS: {
+    SETTINGS: string;
+};

package/components/MFIsolationAppStorybook/icons.js

@@ -0,0 +1,6 @@
+const PATH_ICONS = {
+  SETTINGS: "frontend/components/account_popover/assets/icons/configuration.svg"
+};
+export {
+  PATH_ICONS as P
+};

package/components/MFIsolationAppStorybook/index.d.ts

@@ -0,0 +1 @@
+export { MFIsolationAppStorybook } from './MFIsolationAppStorybook';

package/components/MFIsolationAppStorybook/index.js

@@ -0,0 +1 @@
+