@m4l/components 9.3.26 → 9.3.27-BE071125-beta.1

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",
+    iconButtonEdit = "iconButtonEdit",
+    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<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IconButtonEditStyled: 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" | "ariaLabel" | "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;
+}, {}, {}>;
+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" | "ariaLabel" | "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/Icon/Icon.js

@@ -20,7 +20,8 @@ const Icon = (props) => {
     disabled,
     selected,
     enabledSelected,
-    onClick
+    onClick,
+    ariaLabel
   } = props;
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
@@ -71,7 +72,8 @@ const Icon = (props) => {
         className: clsx(classKey.icon, getComponentSlotRoot("M4LIconClass")),
         role: "icon",
         ownerState: { ...ownerState },
-        ...getPropDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId)
+        ...getPropDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId),
+        "aria-label": ariaLabel || "icon"
       }
     ) }),
     isSkeleton && /* @__PURE__ */ jsx(
@@ -81,7 +83,8 @@ const Icon = (props) => {
         role: "icon-skeleton",
         size: adjustedSize,
         variant: "rectangular",
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState },
+        "aria-label": ariaLabel || "icon"
       }
     )
   ] });

package/components/Icon/types.d.ts

@@ -56,6 +56,10 @@ export interface IconProps extends Pick<TooltipProps, 'placement'> {
      * Funcion que se ejecuta al hacer clic en el icono.
      */
     onClick?: (event: React.MouseEvent<any, MouseEvent>) => void;
+    /**
+     * Aria label for the icon component.
+     */
+    ariaLabel?: string;
 }
 /**
  * Define las las propiedades usadas para estilizar el componente desde el css.

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/LanguagePopover/LanguagePopover.js

@@ -70,6 +70,8 @@ function LanguagePopover(props) {
       ownerState: {
         size: currentSize
       },
+      role: "button",
+      "aria-label": "Language selector",
       size: currentSize,
       className: classRoot,
       ...getPropDataTestId(LANGUAGE_POPOVER_KEY_COMPONENT, LanguagePopoverSlots.root),

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 { W as WrapperAppBarContentChildrenStyled, a as WrapperContentChildrenStyled } from "./slots/MFIsolationAppSlots.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 { 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 = true
   } = 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(
@@ -129,17 +134,17 @@ function MFIsolationApp(props) {
                 onLoad,
                 loadAreasFromNetwork: activeAreasNetwork,
                 loadCookiesFromNetwork: activeCookiesFromNetwork,
-                onSelectLayout: (modId) => {
-                  console.log("onSelectLayout", modId);
-                },
-                children
+                children: /* @__PURE__ */ jsxs(WrapperAppBarContentChildrenStyled, { children: [
+                  appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
+                  /* @__PURE__ */ jsx(WrapperContentChildrenStyled, { children })
+                ] })
               }
             )
           }
         )
       ] })
     }
-  ) }) }) }) }) }) }) }) });
+  ) }) }) }) }) }) }) }) }) });
 }
 export {
   MFIsolationApp as M

package/components/MFIsolationApp/MFIsolationApp.styles.d.ts

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

package/components/MFIsolationApp/MFIsolationApp.styles.js

@@ -0,0 +1,22 @@
+const mfIsolationAppStyles = {
+  /**
+   * Estilos para el contenedor del AppBar y el children de la app.
+   */
+  wrapperAppBarContentChildren: () => ({
+    width: "100%",
+    height: "100%",
+    flexDirection: "column"
+  }),
+  /**
+   * Estilos para el contenedor del children de la app.
+   */
+  wrapperContentChildren: () => ({
+    width: "100%",
+    flexGrow: 1,
+    flexDirection: "column",
+    position: "relative"
+  })
+};
+export {
+  mfIsolationAppStyles as m
+};

package/components/MFIsolationApp/constants.d.ts

@@ -1 +1,2 @@
 export declare const TOAST_CONTAINER_ID = "toast-host";
+export declare const MF_ISOLATION_APP_KEY = "MFIsolationApp";

package/components/MFIsolationApp/constants.js

@@ -0,0 +1,4 @@
+const MF_ISOLATION_APP_KEY = "MFIsolationApp";
+export {
+  MF_ISOLATION_APP_KEY 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/slots/MFIsolationAppEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum MFIsolationAppSlots {
+    wrapperAppBarContentChildren = "wrapperAppBarContentChildren",
+    wrapperContentChildren = "wrapperContentChildren"
+}

package/components/MFIsolationApp/slots/MFIsolationAppEnum.js

@@ -0,0 +1,8 @@
+var MFIsolationAppSlots = /* @__PURE__ */ ((MFIsolationAppSlots2) => {
+  MFIsolationAppSlots2["wrapperAppBarContentChildren"] = "wrapperAppBarContentChildren";
+  MFIsolationAppSlots2["wrapperContentChildren"] = "wrapperContentChildren";
+  return MFIsolationAppSlots2;
+})(MFIsolationAppSlots || {});
+export {
+  MFIsolationAppSlots as M
+};

package/components/MFIsolationApp/slots/MFIsolationAppSlots.d.ts

@@ -0,0 +1,2 @@
+export declare const WrapperAppBarContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Stack').StackProps, keyof import('../../mui_extended/Stack').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const WrapperContentChildrenStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Stack').StackProps, keyof import('../../mui_extended/Stack').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/MFIsolationApp/slots/MFIsolationAppSlots.js

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import { M as MF_ISOLATION_APP_KEY } from "../constants.js";
+import { M as MFIsolationAppSlots } from "./MFIsolationAppEnum.js";
+import { m as mfIsolationAppStyles } from "../MFIsolationApp.styles.js";
+import { S as Stack } from "../../mui_extended/Stack/Stack.js";
+const WrapperAppBarContentChildrenStyled = styled(Stack, {
+  name: MF_ISOLATION_APP_KEY,
+  slot: MFIsolationAppSlots.wrapperAppBarContentChildren
+})(mfIsolationAppStyles.wrapperAppBarContentChildren);
+const WrapperContentChildrenStyled = styled(Stack, {
+  name: MF_ISOLATION_APP_KEY,
+  slot: MFIsolationAppSlots.wrapperContentChildren
+})(mfIsolationAppStyles.wrapperContentChildren);
+export {
+  WrapperAppBarContentChildrenStyled as W,
+  WrapperContentChildrenStyled as a
+};

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, { role: "button", "aria-label": "Toggle App Bar Settings", src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.SETTINGS}`, onClick: handleOpen })
+    ] })
+  ] });
+}
+export {
+  AppBarSettings as A
+};

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

@@ -0,0 +1 @@
+

package/components/MFIsolationApp/types.d.ts

@@ -1,6 +1,10 @@
 import { ModuleDictionary } from '@m4l/core';
 import { BaseModuleProps } from '../BaseModule';
 import { DeviceType } from '@m4l/graphics';
+import { MFIsolationAppSlots } from './slots/MFIsolationAppEnum';
+import { MF_ISOLATION_APP_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
 export type MFIsolationAppProps = BaseModuleProps & {
     user: string;
     pwd: string;
@@ -13,6 +17,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.
      */
@@ -30,3 +35,6 @@ export type MFIsolationAppProps = BaseModuleProps & {
      */
     areasStoreDevtoolsEnabled?: boolean;
 };
+export type MFIsolationAppSlotsType = keyof typeof MFIsolationAppSlots;
+export type MFIsolationAppOwnerState = {};
+export type MFIsolationAppStyles = M4LOverridesStyleRules<MFIsolationAppSlotsType, typeof MF_ISOLATION_APP_KEY, Theme>;

package/components/MFIsolationAppStorybook/MFIsolationAppStorybook.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useId } from "react";
+import { createBrowserHistory } from "history";
+import EventEmitter from "eventemitter3";
+import NProgress from "nprogress";
+import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider } from "@m4l/graphics";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation } 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 { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.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,
+    // observedDivRef,
+    moduleDictionaryLoaded,
+    forcedDeviceType,
+    areasStoreId,
+    areasStoreDevtoolsEnabled
+  } = 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
+    []
+  );
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, 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
+          }
+        )
+      ] })
+    }
+  ) }) }) }) }) }) }) });
+}
+export {
+  MFIsolationAppStorybook as M
+};

package/components/MFIsolationAppStorybook/index.js

@@ -0,0 +1 @@
+

package/components/MFIsolationAppStorybook/subcomponents/MFAuthAppStorybook/MFAuthAppStorybook.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { DomainCountryProvider } from "@m4l/core";
+import { HostThemeProvider, FormatterProvider } from "@m4l/graphics";
+import { fnComponentsOverrides, getUserThemeOptions } from "@m4l/styles";
+function MFAuthAppStorybook(props) {
+  const { children } = props;
+  const domianCountry = {
+    currency: "USD",
+    currency_decimal_digits: 2
+  };
+  const domainCountry = {
+    id: 1,
+    currency: "USD",
+    currency_decimal_digits: 2,
+    decimal_symbol: ".",
+    thousands_symbol: ","
+  };
+  return /* @__PURE__ */ jsx(
+    HostThemeProvider,
+    {
+      hostThemeOptions: getUserThemeOptions("light", "patronus"),
+      fnComponentsOverrides,
+      isMicroFrontEnd: true,
+      children: /* @__PURE__ */ jsx(DomainCountryProvider, { ...domainCountry, isMicroFrontEnd: false, children: /* @__PURE__ */ jsx(
+        FormatterProvider,
+        {
+          isMicroFrontEnd: false,
+          dateFormatter: {
+            formatDate: format
+          },
+          currencyFormatter: {
+            code: domianCountry.currency,
+            decimalDigits: domianCountry.currency_decimal_digits
+          },
+          children
+        }
+      ) })
+    }
+  );
+}
+export {
+  MFAuthAppStorybook as M
+};

package/components/MFIsolationAppStorybook/subcomponents/MFAuthAppStorybook/index.js

@@ -0,0 +1 @@
+

package/components/MFIsolationAppStorybook/types.d.ts

@@ -8,10 +8,6 @@ export type MFIsolationAppStorybookProps = BaseModuleProps & {
     host_api_remote: string;
     host_static_assets: string;
     environment_assets: string;
-    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.
      */