@m4l/components 9.2.62-B08072025beta.2 → 9.2.62-B09072025beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/@types/types.d.ts +8 -0
- package/components/AppBar/AppBar.js +10 -12
- package/components/AppBar/constants.d.ts +1 -1
- package/components/AppBar/constants.js +1 -1
- package/components/AppBar/slots/AppBarEnum.d.ts +5 -1
- package/components/AppBar/slots/AppBarEnum.js +4 -0
- package/components/AppBar/slots/AppBarSlots.d.ts +18 -4
- package/components/AppBar/slots/AppBarSlots.js +27 -3
- package/components/AppBar/styles.js +42 -0
- package/components/AppBar/types.d.ts +0 -8
- package/components/ContainerFlow/ContainerFlow.d.ts +7 -0
- package/components/ContainerFlow/ContainerFlow.js +25 -0
- package/components/ContainerFlow/ContainerFlow.styles.d.ts +2 -0
- package/components/ContainerFlow/ContainerFlow.styles.js +46 -0
- package/components/ContainerFlow/constants.d.ts +8 -0
- package/components/ContainerFlow/constants.js +19 -0
- package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.d.ts +7 -0
- package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.js +10 -0
- package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.test.d.ts +1 -0
- package/components/ContainerFlow/index.d.ts +2 -0
- package/components/ContainerFlow/slots/ContainerFlowEnum.d.ts +4 -0
- package/components/ContainerFlow/slots/ContainerFlowEnum.js +8 -0
- package/components/ContainerFlow/slots/ContainerFlowSlots.d.ts +6 -0
- package/components/ContainerFlow/slots/ContainerFlowSlots.js +16 -0
- package/components/ContainerFlow/slots/index.d.ts +0 -0
- package/components/ContainerFlow/tests/ContainerFlow.test.d.ts +1 -0
- package/components/ContainerFlow/types.d.ts +41 -0
- package/components/Image/Image.js +4 -2
- package/components/Image/image.styles.js +6 -3
- package/components/Image/types.d.ts +2 -0
- package/components/LoadingError/slots/LoadingErrorSlots.js +1 -1
- package/components/PropertyValue/PropertyValue.styles.js +1 -1
- package/components/SideBar/SideBar.js +2 -6
- package/components/SideBar/constants.d.ts +6 -7
- package/components/SideBar/constants.js +7 -7
- package/components/SideBar/context/sideBarContext/index.js +10 -9
- package/components/SideBar/context/sideBarContext/types.d.ts +10 -2
- package/components/SideBar/slots/SideBarEnum.d.ts +7 -7
- package/components/SideBar/slots/SideBarEnum.js +5 -5
- package/components/SideBar/slots/SideBarSlots.d.ts +9 -9
- package/components/SideBar/slots/SideBarSlots.js +28 -31
- package/components/SideBar/styles.js +3 -3
- package/components/SideBar/subcomponents/ContentComponent/index.js +68 -12
- package/components/SideBar/subcomponents/ContentComponent/style.js +103 -103
- package/components/SideBar/subcomponents/HeaderSidebar/index.d.ts +6 -0
- package/components/SideBar/subcomponents/HeaderSidebar/styles.d.ts +2 -0
- package/components/SideBar/subcomponents/HeaderSidebar/styles.js +24 -0
- package/components/SideBar/subcomponents/HeaderSidebar/types.d.ts +5 -0
- package/components/SideBar/subcomponents/{FooterComponent → Promotion}/index.d.ts +1 -1
- package/components/SideBar/subcomponents/{FooterComponent → Promotion}/index.js +4 -4
- package/components/SideBar/subcomponents/{FooterComponent → Promotion}/styles.js +1 -7
- package/components/SideBar/subcomponents/SideBarDesktop/index.js +3 -4
- package/components/SideBar/subcomponents/SideBarDesktop/styles.js +32 -4
- package/components/SideBar/subcomponents/SideBarMobile/index.js +1 -1
- package/components/SideBar/subcomponents/TreeGroupItems/index.js +3 -4
- package/components/SideBar/subcomponents/TreeGroupItems/styles.js +2 -90
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js +4 -6
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts +0 -1
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js +3 -8
- package/components/SideBar/types.d.ts +7 -12
- package/components/commercial/HamburgerMenu/HamburgerMenu.js +2 -1
- package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js +4 -5
- package/components/index.d.ts +1 -0
- package/components/mui_extended/Accordion/styles.js +3 -5
- package/components/mui_extended/TabContent/TabContent.js +2 -2
- package/components/mui_extended/TabContent/TabContent.styles.js +4 -1
- package/components/mui_extended/TabContent/constants.d.ts +1 -0
- package/components/mui_extended/TabContent/constants.js +2 -0
- package/components/mui_extended/TabContent/types.d.ts +1 -1
- package/components/mui_extended/Typography/Typography.js +3 -1
- package/components/mui_extended/Typography/types.d.ts +5 -0
- package/components/mui_extended/Typography/typography.styles.js +7 -1
- package/index.js +32 -30
- package/package.json +3 -3
- package/storybook/components/ContainerFlow/ContainerFlow.stories.d.ts +32 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn1Wrappers/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn2Wrappers/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn3Wrappers/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderFlexWrap/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/subcomponents/RenderGridLayout/index.d.ts +5 -0
- package/storybook/components/ContainerFlow/wrapperItems/index.d.ts +10 -0
- package/storybook/components/SideBar/SideBar.stories.d.ts +11 -5
- package/storybook/components/SideBar/subcomponents/FooterPromotion/FooterPromotion.d.ts +4 -0
- package/storybook/components/SideBar/subcomponents/FooterPromotion/index.d.ts +1 -0
- package/utils/getSizeStyles/getSizeStyles.d.ts +1 -1
- package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.d.ts +0 -5
- package/components/SideBar/subcomponents/HeaderComponent/HeaderComponent.js +0 -37
- package/components/SideBar/subcomponents/HeaderComponent/index.d.ts +0 -1
- package/components/SideBar/subcomponents/HeaderComponent/styles.d.ts +0 -2
- package/components/SideBar/subcomponents/HeaderComponent/styles.js +0 -44
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.d.ts +0 -7
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/AdormentIcon.js +0 -12
- package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/AdormentIcon/types.d.ts +0 -4
- package/storybook/components/SideBar/subcomponents/FooterComponentHost/FooterComponentHost.d.ts +0 -4
- package/storybook/components/SideBar/subcomponents/FooterComponentHost/index.d.ts +0 -1
- package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.d.ts +0 -4
- package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/FooterComponentMicrofrontend.stories.d.ts +0 -14
- package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/constants.d.ts +0 -1
- package/storybook/components/SideBar/subcomponents/FooterComponentMicrofrontend/index.d.ts +0 -1
- package/storybook/components/SideBar/subcomponents/HeaderComponentHost/HeaderComponentHost.d.ts +0 -5
- package/storybook/components/SideBar/subcomponents/HeaderComponentHost/constants.d.ts +0 -1
- package/storybook/components/SideBar/subcomponents/HeaderComponentMicrofrontend/HeaderComponentMicrofrontend.d.ts +0 -5
- package/storybook/components/SideBar/subcomponents/HeaderComponentMicrofrontend/constants.d.ts +0 -1
- /package/components/{SideBar/subcomponents/HeaderComponent → ContainerFlow}/index.js +0 -0
- /package/components/SideBar/subcomponents/{FooterComponent → Promotion}/styles.d.ts +0 -0
- /package/components/SideBar/subcomponents/{FooterComponent → Promotion}/types.d.ts +0 -0
- /package/storybook/components/SideBar/subcomponents/{FooterComponentHost → FooterPromotion}/constants.d.ts +0 -0
package/@types/types.d.ts
CHANGED
|
@@ -149,6 +149,7 @@ import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar
|
|
|
149
149
|
import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
|
|
150
150
|
import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
|
|
151
151
|
import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
|
|
152
|
+
import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
|
|
152
153
|
declare module '@mui/material/styles' {
|
|
153
154
|
// Define the slots in the theme
|
|
154
155
|
interface ComponentNameToClassKey {
|
|
@@ -228,6 +229,7 @@ declare module '@mui/material/styles' {
|
|
|
228
229
|
M4LSplitLayout: SplitLayoutOwnerState;
|
|
229
230
|
M4LObjectLogs: ObjectLogsSlotsType;
|
|
230
231
|
M4LLanguagePopover: LanguagePopoverSlotsType;
|
|
232
|
+
M4LContainerFlow: ContainerFlowSlotsType;
|
|
231
233
|
}
|
|
232
234
|
interface ComponentsPropsList {
|
|
233
235
|
// Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
|
|
@@ -307,6 +309,7 @@ declare module '@mui/material/styles' {
|
|
|
307
309
|
M4LSplitLayout: Partial<SplitLayoutOwnerState>;
|
|
308
310
|
M4LObjectLogs: Partial<ObjectLogsOwnerState>;
|
|
309
311
|
M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
|
|
312
|
+
M4LContainerFlow: Partial<ContainerFlowOwnerState>;
|
|
310
313
|
}
|
|
311
314
|
interface Components {
|
|
312
315
|
M4LDynamicFilter?: {
|
|
@@ -699,5 +702,10 @@ declare module '@mui/material/styles' {
|
|
|
699
702
|
styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
|
|
700
703
|
variants?: ComponentsVariants['M4LLanguagePopover'];
|
|
701
704
|
};
|
|
705
|
+
M4LContainerFlow?: {
|
|
706
|
+
defaultProps?: ComponentsPropsList['M4LContainerFlow'];
|
|
707
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
|
|
708
|
+
variants?: ComponentsVariants['M4LContainerFlow'];
|
|
709
|
+
};
|
|
702
710
|
}
|
|
703
711
|
}
|
|
@@ -3,11 +3,11 @@ import { useIsMobile } from "@m4l/graphics";
|
|
|
3
3
|
import { useEnvironment, useModuleDictionary } from "@m4l/core";
|
|
4
4
|
import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
|
|
5
5
|
import { g as getNameDataTestId } from "./tests/utils.js";
|
|
6
|
-
import { A as AppBarRootStyled, M as MenuIconButtonStyled,
|
|
6
|
+
import { A as AppBarRootStyled, C as ContainerIsotypeNameStyled, a as ContentIsotypeStyled, I as ImageIsotypeStyled, b as CompanyNameStyled, D as DividerStyled, M as MenuIconButtonStyled, c as ContentStyled } from "./slots/AppBarSlots.js";
|
|
7
7
|
import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
|
|
8
8
|
import { P as PATH_IMG_HAMBURGUER, A as APP_BAR_KEY } from "./constants.js";
|
|
9
9
|
const AppBar = (props) => {
|
|
10
|
-
const { onToggleVisible,
|
|
10
|
+
const { onToggleVisible, children, companyLogo, companyName, dataTestid, size } = props;
|
|
11
11
|
const isMobile = useIsMobile();
|
|
12
12
|
const { host_static_assets, environment_assets } = useEnvironment();
|
|
13
13
|
const { getLabel } = useModuleDictionary();
|
|
@@ -22,6 +22,13 @@ const AppBar = (props) => {
|
|
|
22
22
|
className: classRoot,
|
|
23
23
|
...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(dataTestid) } : {},
|
|
24
24
|
children: [
|
|
25
|
+
!isMobile ? /* @__PURE__ */ jsxs(ContainerIsotypeNameStyled, { children: [
|
|
26
|
+
/* @__PURE__ */ jsxs(ContentIsotypeStyled, { children: [
|
|
27
|
+
companyLogo && /* @__PURE__ */ jsx(ImageIsotypeStyled, { alt: "logo", src: companyLogo, size }),
|
|
28
|
+
/* @__PURE__ */ jsx(CompanyNameStyled, { variant: "bodyDens", skeletonWidth: "100px", size, children: companyName })
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ jsx(DividerStyled, { orientation: "vertical", flexItem: true })
|
|
31
|
+
] }) : null,
|
|
25
32
|
isMobile ? /* @__PURE__ */ jsx(
|
|
26
33
|
MenuIconButtonStyled,
|
|
27
34
|
{
|
|
@@ -30,16 +37,7 @@ const AppBar = (props) => {
|
|
|
30
37
|
src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
|
|
31
38
|
onClick: onToggleVisible
|
|
32
39
|
}
|
|
33
|
-
) :
|
|
34
|
-
MenuIconButtonStyled,
|
|
35
|
-
{
|
|
36
|
-
src: `${host_static_assets}/${environment_assets}/${PATH_IMG_HAMBURGUER}`,
|
|
37
|
-
onClick: onToggleAnchored,
|
|
38
|
-
rotationAngle: sidebarAnchored ? 0 : 180,
|
|
39
|
-
variant: "outline",
|
|
40
|
-
role: "anchored-button"
|
|
41
|
-
}
|
|
42
|
-
),
|
|
40
|
+
) : null,
|
|
43
41
|
/* @__PURE__ */ jsx(
|
|
44
42
|
ContentStyled,
|
|
45
43
|
{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const APP_BAR_KEY = "M4LAppBar";
|
|
2
|
-
export declare const PATH_IMG_HAMBURGUER = "frontend/components/
|
|
2
|
+
export declare const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const APP_BAR_KEY = "M4LAppBar";
|
|
2
|
-
const PATH_IMG_HAMBURGUER = "frontend/components/
|
|
2
|
+
const PATH_IMG_HAMBURGUER = "frontend/components/settings/assets/icons/options.svg";
|
|
3
3
|
export {
|
|
4
4
|
APP_BAR_KEY as A,
|
|
5
5
|
PATH_IMG_HAMBURGUER as P
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
export declare enum AppBarSlots {
|
|
2
2
|
appBarRoot = "appBarRoot",
|
|
3
3
|
containerIsotypeName = "containerIsotypeName",
|
|
4
|
+
imageIsotype = "imageIsotype",
|
|
5
|
+
companyName = "companyName",
|
|
4
6
|
menuIconButton = "menuIconButton",
|
|
5
|
-
content = "content"
|
|
7
|
+
content = "content",
|
|
8
|
+
contentIsoType = "contentIsoType",
|
|
9
|
+
divider = "divider"
|
|
6
10
|
}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
var AppBarSlots = /* @__PURE__ */ ((AppBarSlots2) => {
|
|
2
2
|
AppBarSlots2["appBarRoot"] = "appBarRoot";
|
|
3
3
|
AppBarSlots2["containerIsotypeName"] = "containerIsotypeName";
|
|
4
|
+
AppBarSlots2["imageIsotype"] = "imageIsotype";
|
|
5
|
+
AppBarSlots2["companyName"] = "companyName";
|
|
4
6
|
AppBarSlots2["menuIconButton"] = "menuIconButton";
|
|
5
7
|
AppBarSlots2["content"] = "content";
|
|
8
|
+
AppBarSlots2["contentIsoType"] = "contentIsoType";
|
|
9
|
+
AppBarSlots2["divider"] = "divider";
|
|
6
10
|
return AppBarSlots2;
|
|
7
11
|
})(AppBarSlots || {});
|
|
8
12
|
export {
|
|
@@ -1,12 +1,26 @@
|
|
|
1
|
-
export declare const AppBarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material
|
|
1
|
+
export declare const AppBarRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
2
2
|
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
3
3
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
|
|
4
|
-
export declare const ContainerIsotypeNameStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material
|
|
4
|
+
export declare const ContainerIsotypeNameStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
5
5
|
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
6
6
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const ImageIsotypeStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
8
8
|
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
9
9
|
}, {}, {}>;
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const CompanyNameStyled: 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').Theme> & Record<string, unknown> & {
|
|
11
|
+
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
12
|
+
}, {}, {}>;
|
|
13
|
+
export declare const MenuIconButtonStyled: 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').Theme> & Record<string, unknown> & {
|
|
14
|
+
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
15
|
+
}, {}, {}>;
|
|
16
|
+
export declare const ContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
11
17
|
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
12
18
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
19
|
+
export declare const ContentIsotypeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
20
|
+
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
21
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
22
|
+
export declare const DividerStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').DividerOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
|
|
23
|
+
ref?: ((instance: HTMLHRElement | 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<HTMLHRElement> | null | undefined;
|
|
24
|
+
}, "children" | "light" | "style" | "absolute" | "variant" | "textAlign" | "className" | "classes" | "sx" | "orientation" | "flexItem">, "children" | "ref" | "title" | "id" | "light" | "hidden" | "color" | "content" | "style" | "absolute" | "variant" | "textAlign" | "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" | "orientation" | "flexItem"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
|
|
25
|
+
ownerState?: (Partial<import('../types').AppBarOwnerState> & Record<string, unknown>) | undefined;
|
|
26
|
+
}, {}, {}>;
|
|
@@ -2,15 +2,26 @@ import { styled } from "@mui/material/styles";
|
|
|
2
2
|
import { A as APP_BAR_KEY } from "../constants.js";
|
|
3
3
|
import { A as AppBarSlots } from "./AppBarEnum.js";
|
|
4
4
|
import { a as appBarStyles } from "../styles.js";
|
|
5
|
+
import { Divider } from "@mui/material";
|
|
6
|
+
import { I as Image } from "../../Image/Image.js";
|
|
7
|
+
import { T as Typography } from "../../mui_extended/Typography/Typography.js";
|
|
5
8
|
import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
|
|
6
9
|
const AppBarRootStyled = styled("header", {
|
|
7
10
|
name: APP_BAR_KEY,
|
|
8
11
|
slot: AppBarSlots.appBarRoot
|
|
9
12
|
})(appBarStyles?.appBarRoot);
|
|
10
|
-
styled("div", {
|
|
13
|
+
const ContainerIsotypeNameStyled = styled("div", {
|
|
11
14
|
name: APP_BAR_KEY,
|
|
12
15
|
slot: AppBarSlots.containerIsotypeName
|
|
13
16
|
})(appBarStyles?.containerIsotypeName);
|
|
17
|
+
const ImageIsotypeStyled = styled(Image, {
|
|
18
|
+
name: APP_BAR_KEY,
|
|
19
|
+
slot: AppBarSlots.imageIsotype
|
|
20
|
+
})(appBarStyles?.imageIsotype);
|
|
21
|
+
const CompanyNameStyled = styled(Typography, {
|
|
22
|
+
name: APP_BAR_KEY,
|
|
23
|
+
slot: AppBarSlots.companyName
|
|
24
|
+
})(appBarStyles?.companyName);
|
|
14
25
|
const MenuIconButtonStyled = styled(IconButton, {
|
|
15
26
|
name: APP_BAR_KEY,
|
|
16
27
|
slot: AppBarSlots.menuIconButton
|
|
@@ -19,8 +30,21 @@ const ContentStyled = styled("div", {
|
|
|
19
30
|
name: APP_BAR_KEY,
|
|
20
31
|
slot: AppBarSlots.content
|
|
21
32
|
})(appBarStyles?.content);
|
|
33
|
+
const ContentIsotypeStyled = styled("div", {
|
|
34
|
+
name: APP_BAR_KEY,
|
|
35
|
+
slot: AppBarSlots.contentIsoType
|
|
36
|
+
})(appBarStyles?.contentIsoType);
|
|
37
|
+
const DividerStyled = styled(Divider, {
|
|
38
|
+
name: APP_BAR_KEY,
|
|
39
|
+
slot: AppBarSlots.divider
|
|
40
|
+
})(appBarStyles?.divider);
|
|
22
41
|
export {
|
|
23
42
|
AppBarRootStyled as A,
|
|
24
|
-
|
|
25
|
-
|
|
43
|
+
ContainerIsotypeNameStyled as C,
|
|
44
|
+
DividerStyled as D,
|
|
45
|
+
ImageIsotypeStyled as I,
|
|
46
|
+
MenuIconButtonStyled as M,
|
|
47
|
+
ContentIsotypeStyled as a,
|
|
48
|
+
CompanyNameStyled as b,
|
|
49
|
+
ContentStyled as c
|
|
26
50
|
};
|
|
@@ -35,6 +35,26 @@ const appBarStyles = {
|
|
|
35
35
|
width: "204px",
|
|
36
36
|
minWidth: "204px"
|
|
37
37
|
}),
|
|
38
|
+
/**
|
|
39
|
+
* ****************************************************
|
|
40
|
+
* Estilos para la imagen del logotipo de la empresa.
|
|
41
|
+
* ****************************************************
|
|
42
|
+
*/
|
|
43
|
+
imageIsotype: ({ theme }) => ({
|
|
44
|
+
width: `${theme.vars.size.baseSpacings.sp6} !important`,
|
|
45
|
+
height: `${theme.vars.size.baseSpacings.sp6} !important`,
|
|
46
|
+
border: `1px solid ${theme.vars.palette.border.default}`
|
|
47
|
+
}),
|
|
48
|
+
/**
|
|
49
|
+
* ****************************************************
|
|
50
|
+
* Estilos para el nombre de la empresa.
|
|
51
|
+
* ****************************************************
|
|
52
|
+
*/
|
|
53
|
+
companyName: ({ theme }) => ({
|
|
54
|
+
display: "grid",
|
|
55
|
+
placeContent: "center",
|
|
56
|
+
color: theme.vars.palette.text.primary
|
|
57
|
+
}),
|
|
38
58
|
/**
|
|
39
59
|
* ****************************************************
|
|
40
60
|
* Estilos para el botón de menú de la barra de app
|
|
@@ -59,6 +79,28 @@ const appBarStyles = {
|
|
|
59
79
|
flex: "1",
|
|
60
80
|
height: theme.vars.size.baseSpacings.sp12,
|
|
61
81
|
overflow: "auto"
|
|
82
|
+
}),
|
|
83
|
+
/**
|
|
84
|
+
* **************************************************************
|
|
85
|
+
* Estilos para el contenedor del contenido del logotipo y nombre
|
|
86
|
+
* **************************************************************
|
|
87
|
+
*/
|
|
88
|
+
contentIsoType: ({ theme }) => ({
|
|
89
|
+
display: "flex",
|
|
90
|
+
flexDirection: "row",
|
|
91
|
+
alignItems: "center",
|
|
92
|
+
gap: theme.vars.size.baseSpacings.sp3,
|
|
93
|
+
height: theme.vars.size.baseSpacings.sp6
|
|
94
|
+
}),
|
|
95
|
+
/**
|
|
96
|
+
* **************************************************************
|
|
97
|
+
* Estilos para el divisor entre el logotipo y el contenido
|
|
98
|
+
* **************************************************************
|
|
99
|
+
*/
|
|
100
|
+
divider: ({ theme, ownerState }) => ({
|
|
101
|
+
height: "100%",
|
|
102
|
+
borderColor: theme.vars.palette.border.secondary,
|
|
103
|
+
borderRightWidth: ownerState?.isMobile ? "thin" : "none"
|
|
62
104
|
})
|
|
63
105
|
};
|
|
64
106
|
export {
|
|
@@ -25,18 +25,10 @@ export interface AppBarProps {
|
|
|
25
25
|
* Opción de aparición de la barra de aplicaciones.
|
|
26
26
|
*/
|
|
27
27
|
variant?: 'standard';
|
|
28
|
-
/**
|
|
29
|
-
* Indica si la barra lateral está anclada.
|
|
30
|
-
*/
|
|
31
|
-
sidebarAnchored: boolean;
|
|
32
28
|
/**
|
|
33
29
|
* Función que activa la visualización del menú de la aplicación en la vista móvil.
|
|
34
30
|
*/
|
|
35
31
|
onToggleVisible: () => void;
|
|
36
|
-
/**
|
|
37
|
-
* Función que activa la visualización del menú de la aplicación en la vista móvil.
|
|
38
|
-
*/
|
|
39
|
-
onToggleAnchored: () => void;
|
|
40
32
|
/**
|
|
41
33
|
* Elementos secundarios de la barra de aplicaciones.
|
|
42
34
|
*/
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ContainerFlowProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Componente que permite renderizar un contenedor de items en forma de flujo.
|
|
4
|
+
* @param props - Propiedades del componente.
|
|
5
|
+
* @returns Un componente de tipo div con los estilos del contenedor de items.
|
|
6
|
+
*/
|
|
7
|
+
export declare const ContainerFlow: (props: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { C as CONTAINER_FLOW_CLASSES } from "./constants.js";
|
|
3
|
+
import { C as ContainerFlowWrapperItemStyled, a as ContainerFlowRootStyled } from "./slots/ContainerFlowSlots.js";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
const ContainerFlow = (props) => {
|
|
6
|
+
const { variant = "column-flex", size, children, minWidth, className, gap = "standard" } = props;
|
|
7
|
+
const isColumnFlex = variant === "column-flex";
|
|
8
|
+
const ownerState = {
|
|
9
|
+
variant,
|
|
10
|
+
size,
|
|
11
|
+
minWidth,
|
|
12
|
+
gap
|
|
13
|
+
};
|
|
14
|
+
const childrenArray = Array.isArray(children) ? children : children ? [children] : [];
|
|
15
|
+
let itemsToRender;
|
|
16
|
+
if (!isColumnFlex && children) {
|
|
17
|
+
itemsToRender = children;
|
|
18
|
+
} else if (childrenArray.length > 0) {
|
|
19
|
+
itemsToRender = childrenArray.map((child, index) => /* @__PURE__ */ jsx(ContainerFlowWrapperItemStyled, { role: "listitem", ownerState: { variant, size }, className: CONTAINER_FLOW_CLASSES.wrapperItem, children: child }, index));
|
|
20
|
+
}
|
|
21
|
+
return /* @__PURE__ */ jsx(ContainerFlowRootStyled, { role: "list", ownerState, className: clsx(CONTAINER_FLOW_CLASSES.root, className), children: itemsToRender });
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
ContainerFlow as C
|
|
25
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { g as getSpacingValue } from "./helpers/getSpacingValue/getSpacingValue.js";
|
|
2
|
+
import { a as CONTAINER_QUERY_NAME } from "./constants.js";
|
|
3
|
+
const containerFlowStyles = {
|
|
4
|
+
/**
|
|
5
|
+
* Estilos para el contenedor raíz del componente.
|
|
6
|
+
*/
|
|
7
|
+
root: ({ ownerState }) => ({
|
|
8
|
+
width: "100%",
|
|
9
|
+
height: "100%",
|
|
10
|
+
gap: getSpacingValue(ownerState?.gap ?? "standard"),
|
|
11
|
+
containerName: CONTAINER_QUERY_NAME,
|
|
12
|
+
containerType: "inline-size",
|
|
13
|
+
...ownerState?.variant === "grid-layout" && {
|
|
14
|
+
display: "grid",
|
|
15
|
+
gridTemplateColumns: `repeat(auto-fill, minmax(${ownerState.minWidth ?? 200}px, 1fr))`,
|
|
16
|
+
height: "fit-content"
|
|
17
|
+
},
|
|
18
|
+
...(ownerState?.variant === "column-flex" || ownerState?.variant === "flex-wrap") && {
|
|
19
|
+
display: "flex",
|
|
20
|
+
flexDirection: "row",
|
|
21
|
+
flexWrap: "wrap",
|
|
22
|
+
height: "fit-content",
|
|
23
|
+
"& > .M4LContainerFlow-wrapperItem": {
|
|
24
|
+
minWidth: ownerState?.minWidth ?? "300px",
|
|
25
|
+
flex: 1
|
|
26
|
+
},
|
|
27
|
+
[`@container ${CONTAINER_QUERY_NAME} (max-width: ${ownerState?.minWidth ? ownerState?.minWidth - 1 : 200 - 1}px)`]: {
|
|
28
|
+
"& > .M4LContainerFlow-wrapperItem": {
|
|
29
|
+
minWidth: "100%",
|
|
30
|
+
maxWidth: "100%"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}),
|
|
35
|
+
/**
|
|
36
|
+
* Estilos para el contenedor de los items del componente.
|
|
37
|
+
*/
|
|
38
|
+
wrapperItem: () => ({
|
|
39
|
+
display: "flex",
|
|
40
|
+
flexDirection: "row",
|
|
41
|
+
flexWrap: "wrap"
|
|
42
|
+
})
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
containerFlowStyles as c
|
|
46
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
|
|
2
|
+
export declare const CONTAINER_FLOW_CLASSES: Record<string, string>;
|
|
3
|
+
export declare const CONTAINER_FLOW_GAP_VALUES: {
|
|
4
|
+
compact: number;
|
|
5
|
+
standard: number;
|
|
6
|
+
comfortable: number;
|
|
7
|
+
};
|
|
8
|
+
export declare const CONTAINER_QUERY_NAME = "container";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
|
|
2
|
+
import { C as ContainerFlowSlots } from "./slots/ContainerFlowEnum.js";
|
|
3
|
+
const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
|
|
4
|
+
const CONTAINER_FLOW_CLASSES = getComponentClasses(
|
|
5
|
+
CONTAINER_FLOW_KEY_COMPONENT,
|
|
6
|
+
ContainerFlowSlots
|
|
7
|
+
);
|
|
8
|
+
const CONTAINER_FLOW_GAP_VALUES = {
|
|
9
|
+
compact: 8,
|
|
10
|
+
standard: 16,
|
|
11
|
+
comfortable: 24
|
|
12
|
+
};
|
|
13
|
+
const CONTAINER_QUERY_NAME = "container";
|
|
14
|
+
export {
|
|
15
|
+
CONTAINER_FLOW_CLASSES as C,
|
|
16
|
+
CONTAINER_QUERY_NAME as a,
|
|
17
|
+
CONTAINER_FLOW_GAP_VALUES as b,
|
|
18
|
+
CONTAINER_FLOW_KEY_COMPONENT as c
|
|
19
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SemanticSpacings } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Función que retorna el valor del gap en función del tipo de gap recibido.
|
|
4
|
+
* @param gap - El gap a convertir.
|
|
5
|
+
* @returns El valor del gap en función del tipo de gap recibido.
|
|
6
|
+
*/
|
|
7
|
+
export declare const getSpacingValue: (gap: SemanticSpacings | number) => number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var ContainerFlowSlots = /* @__PURE__ */ ((ContainerFlowSlots2) => {
|
|
2
|
+
ContainerFlowSlots2["root"] = "root";
|
|
3
|
+
ContainerFlowSlots2["wrapperItem"] = "wrapperItem";
|
|
4
|
+
return ContainerFlowSlots2;
|
|
5
|
+
})(ContainerFlowSlots || {});
|
|
6
|
+
export {
|
|
7
|
+
ContainerFlowSlots as C
|
|
8
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const ContainerFlowRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
2
|
+
ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & Record<string, unknown>) | undefined;
|
|
3
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
4
|
+
export declare const ContainerFlowWrapperItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
5
|
+
ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & Record<string, unknown>) | undefined;
|
|
6
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { styled } from "@mui/material/styles";
|
|
2
|
+
import { c as CONTAINER_FLOW_KEY_COMPONENT } from "../constants.js";
|
|
3
|
+
import { C as ContainerFlowSlots } from "./ContainerFlowEnum.js";
|
|
4
|
+
import { c as containerFlowStyles } from "../ContainerFlow.styles.js";
|
|
5
|
+
const ContainerFlowRootStyled = styled("div", {
|
|
6
|
+
name: CONTAINER_FLOW_KEY_COMPONENT,
|
|
7
|
+
slot: ContainerFlowSlots.root
|
|
8
|
+
})(containerFlowStyles?.root);
|
|
9
|
+
const ContainerFlowWrapperItemStyled = styled("div", {
|
|
10
|
+
name: CONTAINER_FLOW_KEY_COMPONENT,
|
|
11
|
+
slot: ContainerFlowSlots.wrapperItem
|
|
12
|
+
})(containerFlowStyles?.wrapperItem);
|
|
13
|
+
export {
|
|
14
|
+
ContainerFlowWrapperItemStyled as C,
|
|
15
|
+
ContainerFlowRootStyled as a
|
|
16
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Sizes } from '@m4l/styles';
|
|
2
|
+
import { ContainerFlowSlots } from './slots/ContainerFlowEnum';
|
|
3
|
+
import { CONTAINER_FLOW_KEY_COMPONENT } from './constants';
|
|
4
|
+
import { Theme } from '@mui/material';
|
|
5
|
+
import { M4LOverridesStyleRules } from '../../@types/augmentations';
|
|
6
|
+
export type ContainerFlowVariant = 'flex-wrap' | 'column-flex' | 'grid-layout';
|
|
7
|
+
export type SemanticSpacings = 'compact' | 'comfortable' | 'standard';
|
|
8
|
+
export type ContainerFlowProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Variante del contenedor de items.
|
|
11
|
+
*/
|
|
12
|
+
variant: ContainerFlowVariant;
|
|
13
|
+
/**
|
|
14
|
+
* Items del contenedor de items.
|
|
15
|
+
*/
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Tamaño del contenedor de items.
|
|
19
|
+
*/
|
|
20
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
21
|
+
/**
|
|
22
|
+
* Ancho mínimo de los items del contenedor de items.
|
|
23
|
+
*/
|
|
24
|
+
minWidth?: number;
|
|
25
|
+
/**
|
|
26
|
+
* Clase del contenedor de items.
|
|
27
|
+
*/
|
|
28
|
+
className?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Espacio entre los items del contenedor de items.
|
|
31
|
+
*/
|
|
32
|
+
gap?: SemanticSpacings | number;
|
|
33
|
+
};
|
|
34
|
+
export type ContainerFlowSlotsType = keyof typeof ContainerFlowSlots;
|
|
35
|
+
export type ContainerFlowOwnerState = {
|
|
36
|
+
variant: ContainerFlowProps['variant'];
|
|
37
|
+
size: ContainerFlowProps['size'];
|
|
38
|
+
minWidth: ContainerFlowProps['minWidth'];
|
|
39
|
+
gap: ContainerFlowProps['gap'];
|
|
40
|
+
};
|
|
41
|
+
export type ContainerFlowStyles = M4LOverridesStyleRules<ContainerFlowSlots, typeof CONTAINER_FLOW_KEY_COMPONENT, Theme>;
|
|
@@ -13,12 +13,14 @@ function Image(props) {
|
|
|
13
13
|
threshold = 100,
|
|
14
14
|
dataTestId,
|
|
15
15
|
className,
|
|
16
|
+
cover,
|
|
16
17
|
...others
|
|
17
18
|
} = props;
|
|
18
19
|
const isSkeleton = useModuleSkeleton();
|
|
19
20
|
const ownerState = useMemo(() => ({
|
|
20
|
-
isSkeleton
|
|
21
|
-
|
|
21
|
+
isSkeleton,
|
|
22
|
+
cover
|
|
23
|
+
}), [cover, isSkeleton]);
|
|
22
24
|
const lazyLoadComponent = useMemo(() => {
|
|
23
25
|
return /* @__PURE__ */ jsx(
|
|
24
26
|
LazyLoadComponent,
|
|
@@ -2,11 +2,14 @@ const imageStyles = {
|
|
|
2
2
|
/**
|
|
3
3
|
* Estilos para Image.
|
|
4
4
|
*/
|
|
5
|
-
root: {
|
|
5
|
+
root: ({ ownerState }) => ({
|
|
6
6
|
display: "flex",
|
|
7
7
|
flexDirection: "column",
|
|
8
|
-
alignItems: "flex-start"
|
|
9
|
-
|
|
8
|
+
alignItems: "flex-start",
|
|
9
|
+
...ownerState?.cover && {
|
|
10
|
+
objectFit: "cover"
|
|
11
|
+
}
|
|
12
|
+
}),
|
|
10
13
|
/**
|
|
11
14
|
* Estilos para el intersectComponente o para el 'span'
|
|
12
15
|
*/
|
|
@@ -31,9 +31,11 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
|
|
|
31
31
|
enableIntersectionObserver?: boolean;
|
|
32
32
|
className?: string;
|
|
33
33
|
dataTestId?: string;
|
|
34
|
+
cover?: boolean;
|
|
34
35
|
}
|
|
35
36
|
export type ImageSlotsType = keyof typeof ImageSlots;
|
|
36
37
|
export interface ImageOwnerState {
|
|
37
38
|
isSkeleton?: boolean;
|
|
39
|
+
cover?: boolean;
|
|
38
40
|
}
|
|
39
41
|
export type ImageStyles = M4LOverridesStyleRules<ImageSlots, typeof IMAGE_KEY_COMPONENT, Theme>;
|
|
@@ -3,8 +3,8 @@ import { L as LOADING_ERROR_KEY_COMPONENT } from "../constants.js";
|
|
|
3
3
|
import { L as LoadingErrorSlots } from "./LoadingErrorEnum.js";
|
|
4
4
|
import { l as loadingErrorStyles } from "../LoadingError.styles.js";
|
|
5
5
|
import { L as LinearProgressIndeterminate } from "../../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
|
|
6
|
-
import { I as Image } from "../../Image/Image.js";
|
|
7
6
|
import { T as Typography } from "../../mui_extended/Typography/Typography.js";
|
|
7
|
+
import { I as Image } from "../../Image/Image.js";
|
|
8
8
|
const LoadingErrorRootStyled = styled("div", {
|
|
9
9
|
name: LOADING_ERROR_KEY_COMPONENT,
|
|
10
10
|
slot: LoadingErrorSlots.root
|