@m4l/components 9.1.105 → 9.1.107
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 +10 -1
- package/components/Image/Image.js +1 -9
- package/components/NoItemSelected/{index.d.ts → NoItemSelected.d.ts} +1 -1
- package/components/NoItemSelected/NoItemSelected.js +61 -0
- package/components/NoItemSelected/NoItemSelected.styles.d.ts +2 -0
- package/components/NoItemSelected/NoItemSelected.styles.js +98 -0
- package/components/NoItemSelected/constant.d.ts +2 -0
- package/components/NoItemSelected/constant.js +8 -0
- package/components/NoItemSelected/dictionary.d.ts +4 -0
- package/components/NoItemSelected/dictionary.js +4 -9
- package/components/NoItemSelected/slots/NoItemSelectedEnum.d.ts +9 -0
- package/components/NoItemSelected/slots/NoItemSelectedEnum.js +13 -0
- package/components/NoItemSelected/slots/NoItemSelectedSlots.d.ts +21 -0
- package/components/NoItemSelected/slots/NoItemSelectedSlots.js +44 -0
- package/components/NoItemSelected/types.d.ts +17 -1
- package/components/areas/contexts/AreasContext/store.js +2 -1
- package/components/index.d.ts +1 -2
- package/index.js +14 -17
- package/package.json +1 -1
- package/components/NoItemSelected/classes/constants.d.ts +0 -1
- package/components/NoItemSelected/classes/constants.js +0 -4
- package/components/NoItemSelected/classes/index.d.ts +0 -9
- package/components/NoItemSelected/classes/index.js +0 -26
- package/components/NoItemSelected/classes/types.d.ts +0 -6
- package/components/NoItemSelected/index.js +0 -23
- package/components/NoItemSelected/styles.d.ts +0 -4
- package/components/NoItemSelected/styles.js +0 -26
package/@types/types.d.ts
CHANGED
|
@@ -133,6 +133,7 @@ import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-
|
|
|
133
133
|
import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
|
|
134
134
|
import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
|
|
135
135
|
import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
|
|
136
|
+
import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
|
|
136
137
|
import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
|
|
137
138
|
|
|
138
139
|
|
|
@@ -200,6 +201,7 @@ declare module '@mui/material/styles' {
|
|
|
200
201
|
M4LStack: StackSlotsType;
|
|
201
202
|
M4LDateTimePicker: DateTimePickerSlotsType;
|
|
202
203
|
M4LDivider: DividerSlotsType;
|
|
204
|
+
M4LNoItemSelected: NoItemSelectedSlotsType;
|
|
203
205
|
M4LActionFormIntro: ActionFormIntroSlotsType;
|
|
204
206
|
}
|
|
205
207
|
interface ComponentsPropsList {
|
|
@@ -265,6 +267,7 @@ declare module '@mui/material/styles' {
|
|
|
265
267
|
M4LStack: Partial<StackOwnerState>;
|
|
266
268
|
M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
|
|
267
269
|
M4LDivider: Partial<DividerOwnerState>;
|
|
270
|
+
M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
|
|
268
271
|
M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
|
|
269
272
|
}
|
|
270
273
|
interface Components {
|
|
@@ -552,6 +555,7 @@ declare module '@mui/material/styles' {
|
|
|
552
555
|
defaultProps?: ComponentsPropsList['M4LScrollBar'];
|
|
553
556
|
styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
|
|
554
557
|
variants?: ComponentsVariants['M4LScrollBar'];
|
|
558
|
+
}
|
|
555
559
|
M4LAreasAdmin?: {
|
|
556
560
|
defaultProps?: ComponentsPropsList['M4LAreasAdmin'];
|
|
557
561
|
styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
|
|
@@ -567,6 +571,11 @@ declare module '@mui/material/styles' {
|
|
|
567
571
|
styleOverrides?: ComponentsOverrides<Theme>['M4LDateTimePicker'];
|
|
568
572
|
variants?: ComponentsVariants['M4LDateTimePicker'];
|
|
569
573
|
};
|
|
574
|
+
M4LNoItemSelected?: {
|
|
575
|
+
defaultProps?: ComponentsPropsList['M4LNoItemSelected'];
|
|
576
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LNoItemSelected'];
|
|
577
|
+
variants?: ComponentsVariants['M4LNoItemSelected'];
|
|
578
|
+
}
|
|
570
579
|
M4LActionFormIntro?: {
|
|
571
580
|
defaultProps?: ComponentsPropsList['M4LActionFormIntro '];
|
|
572
581
|
styleOverrides?: ComponentsOverrides<Theme>['M4LActionFormIntro '];
|
|
@@ -578,5 +587,5 @@ declare module '@mui/material/styles' {
|
|
|
578
587
|
variants?: ComponentsVariants['M4LDivider'];
|
|
579
588
|
};
|
|
580
589
|
}
|
|
581
|
-
|
|
590
|
+
|
|
582
591
|
}
|
|
@@ -25,15 +25,7 @@ function Image(props) {
|
|
|
25
25
|
{
|
|
26
26
|
enableIntersectionObserver,
|
|
27
27
|
threshold,
|
|
28
|
-
children: /* @__PURE__ */ jsx(Fragment, { children: ownerState.isSkeleton ? /* @__PURE__ */ jsx(DivContainerSkeletonStyled, { ownerState: {}, className: "M4lclassCssSpecificity", "data-testid": "skeleton-component", children: /* @__PURE__ */ jsx(
|
|
29
|
-
ImgSkeleton,
|
|
30
|
-
{
|
|
31
|
-
ownerState: {},
|
|
32
|
-
className: "M4lclassCssSpecificityIMG",
|
|
33
|
-
src: svgDataUriSkeleton,
|
|
34
|
-
alt: "Skeleton Image"
|
|
35
|
-
}
|
|
36
|
-
) }) : /* @__PURE__ */ jsx(
|
|
28
|
+
children: /* @__PURE__ */ jsx(Fragment, { children: ownerState.isSkeleton ? /* @__PURE__ */ jsx(DivContainerSkeletonStyled, { ownerState: {}, className: "M4lclassCssSpecificity", "data-testid": "skeleton-component", children: /* @__PURE__ */ jsx(ImgSkeleton, { ownerState: {}, className: "M4lclassCssSpecificityIMG", src: svgDataUriSkeleton, alt: "Skeleton Image" }) }) : /* @__PURE__ */ jsx(
|
|
37
29
|
ImgStyled,
|
|
38
30
|
{
|
|
39
31
|
ownerState: { ...ownerState },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NoItemSelectedProps } from './types';
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* Componente que muestra un mensaje y una imagen cuando no se ha seleccionado ningún elemento.
|
|
4
4
|
*/
|
|
5
5
|
export declare function NoItemSelected(props: NoItemSelectedProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEnvironment, useModuleDictionary } from "@m4l/core";
|
|
3
|
+
import { useMemo, useRef, useState, useEffect } from "react";
|
|
4
|
+
import { W as WrapperNoItemSelectedStyled, N as NoItemSelectedContainer, I as ImgStyled, a as WrapperTpography, T as TypographyStyledTitle, b as TypographyStyledDetail, L as LabelDetail } from "./slots/NoItemSelectedSlots.js";
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import { N as NO_ITEM_SELECT_KEY_COMPONENT, c as classNoItemSelected } from "./constant.js";
|
|
7
|
+
import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
|
|
8
|
+
import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
|
|
9
|
+
import { D as DICTIONARY } from "./dictionary.js";
|
|
10
|
+
import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
|
|
11
|
+
function NoItemSelected(props) {
|
|
12
|
+
const { image, message, size = "medium", className, dataTestId } = props;
|
|
13
|
+
const { host_static_assets, environment_assets } = useEnvironment();
|
|
14
|
+
const { currentSize } = useComponentSize(size);
|
|
15
|
+
const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
|
|
16
|
+
const { getLabel } = useModuleDictionary();
|
|
17
|
+
const defaultImage = useMemo(() => {
|
|
18
|
+
return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
|
|
19
|
+
}, []);
|
|
20
|
+
const ownerState = {
|
|
21
|
+
size
|
|
22
|
+
};
|
|
23
|
+
const containerRef = useRef(null);
|
|
24
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
const observer = new ResizeObserver((entries) => {
|
|
27
|
+
for (const entry of entries) {
|
|
28
|
+
setIsVisible(entry.contentRect.height >= 49);
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
if (containerRef.current) {
|
|
32
|
+
observer.observe(containerRef.current);
|
|
33
|
+
}
|
|
34
|
+
return () => observer.disconnect();
|
|
35
|
+
}, []);
|
|
36
|
+
return /* @__PURE__ */ jsxs(
|
|
37
|
+
WrapperNoItemSelectedStyled,
|
|
38
|
+
{
|
|
39
|
+
ownerState: {},
|
|
40
|
+
...getPropDataTestId(NO_ITEM_SELECT_KEY_COMPONENT, NoItemSelectedSlots.root, dataTestId),
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx(NoItemSelectedContainer, { ownerState: {}, ref: containerRef, children: isVisible && /* @__PURE__ */ jsx(
|
|
43
|
+
ImgStyled,
|
|
44
|
+
{
|
|
45
|
+
className: clsx(classNoItemSelected.img, "noItemSelectedImg", className),
|
|
46
|
+
ownerState: {},
|
|
47
|
+
src: image || defaultImage,
|
|
48
|
+
alt: "No item selected"
|
|
49
|
+
}
|
|
50
|
+
) }),
|
|
51
|
+
!message ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(WrapperTpography, { ownerState: {}, size: adjustedSize, children: [
|
|
52
|
+
/* @__PURE__ */ jsx(TypographyStyledTitle, { ownerState: { ...ownerState }, size: adjustedSize, children: getLabel(DICTIONARY.LABEL_TITLE) }),
|
|
53
|
+
/* @__PURE__ */ jsx(TypographyStyledDetail, { ownerState: { ...ownerState }, size: adjustedSize, children: getLabel(DICTIONARY.LABEL_DETAIL) })
|
|
54
|
+
] }) }) : /* @__PURE__ */ jsx(LabelDetail, { ownerState: {}, children: message })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
NoItemSelected as N
|
|
61
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
|
|
2
|
+
const noItemSelectedStyles = {
|
|
3
|
+
/**
|
|
4
|
+
* 📦 Estilos para el contenedor principal del componente NoItemSelected 📦.
|
|
5
|
+
*/
|
|
6
|
+
root: ({ theme }) => ({
|
|
7
|
+
display: "flex",
|
|
8
|
+
flexDirection: "column",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
height: "80%",
|
|
12
|
+
width: "100%",
|
|
13
|
+
maxWidth: "600px",
|
|
14
|
+
minWidth: "200px",
|
|
15
|
+
padding: "10px",
|
|
16
|
+
gap: theme.vars.size.baseSpacings.sp2,
|
|
17
|
+
minHeight: "60px"
|
|
18
|
+
}),
|
|
19
|
+
/**
|
|
20
|
+
* 📸 Estilos para la imagen del componente NoItemSelected 📸.
|
|
21
|
+
*/
|
|
22
|
+
img: () => ({
|
|
23
|
+
display: "flex",
|
|
24
|
+
top: "50%",
|
|
25
|
+
left: "50%",
|
|
26
|
+
width: "100%",
|
|
27
|
+
height: "auto ",
|
|
28
|
+
maxWidth: "150px",
|
|
29
|
+
maxHeight: "106px",
|
|
30
|
+
minWidth: "70px",
|
|
31
|
+
minHeight: "50px"
|
|
32
|
+
}),
|
|
33
|
+
/**
|
|
34
|
+
* 🏷️ Estilos para la etiqueta TypographyTitle del componente NoItemSelected 🏷️.
|
|
35
|
+
*/
|
|
36
|
+
typographyStyledTitle: ({ theme, ownerState }) => ({
|
|
37
|
+
"&.MuiTypography-root": {
|
|
38
|
+
"&.M4lclassCssSpecificity": {
|
|
39
|
+
display: "flex",
|
|
40
|
+
color: theme.vars.palette.primary.semanticText,
|
|
41
|
+
...getTypographyStyles(
|
|
42
|
+
theme.generalSettings.isMobile,
|
|
43
|
+
ownerState.size || "medium",
|
|
44
|
+
"bodyDens"
|
|
45
|
+
),
|
|
46
|
+
...getTypographyStyles(
|
|
47
|
+
theme.generalSettings.isMobile,
|
|
48
|
+
ownerState.size || "small",
|
|
49
|
+
"bodyDens"
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}),
|
|
54
|
+
/**
|
|
55
|
+
* 🏷️ Estilos para la etiqueta TypographyDetail del componente NoItemSelected 🏷️.
|
|
56
|
+
*/
|
|
57
|
+
typographyStyledDetail: ({ theme, ownerState }) => ({
|
|
58
|
+
"&.MuiTypography-root": {
|
|
59
|
+
"&.M4lclassCssSpecificity": {
|
|
60
|
+
color: theme.vars.palette.text.secondary,
|
|
61
|
+
...getTypographyStyles(
|
|
62
|
+
theme.generalSettings.isMobile,
|
|
63
|
+
ownerState.size || "medium",
|
|
64
|
+
"bodyDens"
|
|
65
|
+
),
|
|
66
|
+
...getTypographyStyles(
|
|
67
|
+
theme.generalSettings.isMobile,
|
|
68
|
+
ownerState.size || "small",
|
|
69
|
+
"body"
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}),
|
|
74
|
+
/**
|
|
75
|
+
* 🎁 Estilos para el wrapper de la typography de NoItemSelect. 🎁
|
|
76
|
+
*/
|
|
77
|
+
wrapperTpography: ({ theme }) => ({
|
|
78
|
+
display: "flex",
|
|
79
|
+
justifyContent: "center",
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
flexDirection: "column",
|
|
82
|
+
gap: theme.vars.size.baseSpacings["sp0-5"]
|
|
83
|
+
}),
|
|
84
|
+
/**
|
|
85
|
+
* 🎁 Estilos para el wrapper de la imagen de NoItemSelect. 🎁
|
|
86
|
+
*/
|
|
87
|
+
noItemSelectedContainer: () => ({
|
|
88
|
+
justifyContent: "center",
|
|
89
|
+
display: "flex",
|
|
90
|
+
height: "100%",
|
|
91
|
+
maxHeight: "106px",
|
|
92
|
+
width: "100%"
|
|
93
|
+
}),
|
|
94
|
+
labelDetail: {}
|
|
95
|
+
};
|
|
96
|
+
export {
|
|
97
|
+
noItemSelectedStyles as n
|
|
98
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
|
|
2
|
+
import { N as NoItemSelectedSlots } from "./slots/NoItemSelectedEnum.js";
|
|
3
|
+
const NO_ITEM_SELECT_KEY_COMPONENT = "M4LNoItemSelected";
|
|
4
|
+
const classNoItemSelected = getComponentClasses(NO_ITEM_SELECT_KEY_COMPONENT, NoItemSelectedSlots);
|
|
5
|
+
export {
|
|
6
|
+
NO_ITEM_SELECT_KEY_COMPONENT as N,
|
|
7
|
+
classNoItemSelected as c
|
|
8
|
+
};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { Dictionary } from '@m4l/core';
|
|
2
2
|
export declare function getNoItemSelectedComponentsDictionary(): string[];
|
|
3
3
|
export declare const defaultNoItemSelectedDictionary: Dictionary;
|
|
4
|
+
export declare const DICTIONARY: {
|
|
5
|
+
readonly LABEL_TITLE: "no_item_selected.title";
|
|
6
|
+
readonly LABEL_DETAIL: "no_item_selected.detail";
|
|
7
|
+
};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const defaultNoItemSelectedDictionary = {
|
|
5
|
-
no_item_selected: {
|
|
6
|
-
message: "Please select a item to show detail"
|
|
7
|
-
}
|
|
1
|
+
const DICTIONARY = {
|
|
2
|
+
LABEL_TITLE: "no_item_selected.title",
|
|
3
|
+
LABEL_DETAIL: "no_item_selected.detail"
|
|
8
4
|
};
|
|
9
5
|
export {
|
|
10
|
-
|
|
11
|
-
getNoItemSelectedComponentsDictionary as g
|
|
6
|
+
DICTIONARY as D
|
|
12
7
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare enum NoItemSelectedSlots {
|
|
2
|
+
root = "root",
|
|
3
|
+
img = "img",
|
|
4
|
+
typographyStyledTitle = "typographyStyledTitle",
|
|
5
|
+
typographyStyledDetail = "typographyStyledDetail",
|
|
6
|
+
labelDetail = "labelDetail",
|
|
7
|
+
noItemSelectedContainer = "noItemSelectedContainer",
|
|
8
|
+
wrapperTpography = "wrapperTpography"
|
|
9
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
var NoItemSelectedSlots = /* @__PURE__ */ ((NoItemSelectedSlots2) => {
|
|
2
|
+
NoItemSelectedSlots2["root"] = "root";
|
|
3
|
+
NoItemSelectedSlots2["img"] = "img";
|
|
4
|
+
NoItemSelectedSlots2["typographyStyledTitle"] = "typographyStyledTitle";
|
|
5
|
+
NoItemSelectedSlots2["typographyStyledDetail"] = "typographyStyledDetail";
|
|
6
|
+
NoItemSelectedSlots2["labelDetail"] = "labelDetail";
|
|
7
|
+
NoItemSelectedSlots2["noItemSelectedContainer"] = "noItemSelectedContainer";
|
|
8
|
+
NoItemSelectedSlots2["wrapperTpography"] = "wrapperTpography";
|
|
9
|
+
return NoItemSelectedSlots2;
|
|
10
|
+
})(NoItemSelectedSlots || {});
|
|
11
|
+
export {
|
|
12
|
+
NoItemSelectedSlots as N
|
|
13
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare const WrapperNoItemSelectedStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
2
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
3
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
4
|
+
export declare const ImgStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
5
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
6
|
+
}, {}, {}>;
|
|
7
|
+
export declare const TypographyStyledTitle: 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> & {
|
|
8
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
9
|
+
}, {}, {}>;
|
|
10
|
+
export declare const TypographyStyledDetail: 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> & {
|
|
11
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
12
|
+
}, {}, {}>;
|
|
13
|
+
export declare const LabelDetail: import('@emotion/styled').StyledComponent<Pick<import('../../Label').LabelProps, keyof import('../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
14
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
15
|
+
}, {}, {}>;
|
|
16
|
+
export declare const NoItemSelectedContainer: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
17
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
18
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
19
|
+
export declare const WrapperTpography: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
|
|
20
|
+
ownerState: Partial<import('../types').NoItemSelectedOwnerState> & Record<string, unknown>;
|
|
21
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { styled } from "@mui/material/styles";
|
|
2
|
+
import { N as NoItemSelectedSlots } from "./NoItemSelectedEnum.js";
|
|
3
|
+
import { N as NO_ITEM_SELECT_KEY_COMPONENT } from "../constant.js";
|
|
4
|
+
import { n as noItemSelectedStyles } from "../NoItemSelected.styles.js";
|
|
5
|
+
import { T as Typography } from "../../mui_extended/Typography/Typography.js";
|
|
6
|
+
import { L as Label } from "../../Label/Label.js";
|
|
7
|
+
import { I as Image } from "../../Image/Image.js";
|
|
8
|
+
const WrapperNoItemSelectedStyled = styled("div", {
|
|
9
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
10
|
+
slot: NoItemSelectedSlots.root
|
|
11
|
+
})(noItemSelectedStyles?.root);
|
|
12
|
+
const ImgStyled = styled(Image, {
|
|
13
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
14
|
+
slot: NoItemSelectedSlots.img
|
|
15
|
+
})(noItemSelectedStyles?.img);
|
|
16
|
+
const TypographyStyledTitle = styled(Typography, {
|
|
17
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
18
|
+
slot: NoItemSelectedSlots.typographyStyledTitle
|
|
19
|
+
})(noItemSelectedStyles?.typographyStyledTitle);
|
|
20
|
+
const TypographyStyledDetail = styled(Typography, {
|
|
21
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
22
|
+
slot: NoItemSelectedSlots.typographyStyledDetail
|
|
23
|
+
})(noItemSelectedStyles?.typographyStyledDetail);
|
|
24
|
+
const LabelDetail = styled(Label, {
|
|
25
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
26
|
+
slot: NoItemSelectedSlots.labelDetail
|
|
27
|
+
})(noItemSelectedStyles?.labelDetail);
|
|
28
|
+
const NoItemSelectedContainer = styled("div", {
|
|
29
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
30
|
+
slot: NoItemSelectedSlots.noItemSelectedContainer
|
|
31
|
+
})(noItemSelectedStyles?.noItemSelectedContainer);
|
|
32
|
+
const WrapperTpography = styled("div", {
|
|
33
|
+
name: NO_ITEM_SELECT_KEY_COMPONENT,
|
|
34
|
+
slot: NoItemSelectedSlots.wrapperTpography
|
|
35
|
+
})(noItemSelectedStyles?.wrapperTpography);
|
|
36
|
+
export {
|
|
37
|
+
ImgStyled as I,
|
|
38
|
+
LabelDetail as L,
|
|
39
|
+
NoItemSelectedContainer as N,
|
|
40
|
+
TypographyStyledTitle as T,
|
|
41
|
+
WrapperNoItemSelectedStyled as W,
|
|
42
|
+
WrapperTpography as a,
|
|
43
|
+
TypographyStyledDetail as b
|
|
44
|
+
};
|
|
@@ -1,4 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
import { Theme, PaletteColor } from '@mui/material';
|
|
2
|
+
import { M4LOverridesStyleRules } from '../../@types/augmentations';
|
|
3
|
+
import { NO_ITEM_SELECT_KEY_COMPONENT } from './constant';
|
|
4
|
+
import { Sizes } from '@m4l/styles';
|
|
5
|
+
import { NoItemSelectedSlots } from './slots/NoItemSelectedEnum';
|
|
6
|
+
import { LabelProps } from '../Label';
|
|
7
|
+
export interface NoItemSelectedProps extends Pick<LabelProps, 'label'> {
|
|
2
8
|
image?: string;
|
|
3
9
|
message?: string;
|
|
10
|
+
paletteColor?: PaletteColor;
|
|
11
|
+
dictionaryId?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
dataTestId?: string;
|
|
14
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
4
15
|
}
|
|
16
|
+
export interface NoItemSelectedOwnerState {
|
|
17
|
+
size: Extract<Sizes, 'small' | 'medium'>;
|
|
18
|
+
}
|
|
19
|
+
export type NoItemSelectedSlotsType = keyof typeof NoItemSelectedSlots;
|
|
20
|
+
export type NoItemSelectedStyles = M4LOverridesStyleRules<NoItemSelectedSlotsType, typeof NO_ITEM_SELECT_KEY_COMPONENT, Theme>;
|
package/components/index.d.ts
CHANGED
|
@@ -29,8 +29,7 @@ export * from './modal';
|
|
|
29
29
|
export * from './LoadingError';
|
|
30
30
|
export * from './MFLoader';
|
|
31
31
|
export { NavLink } from './mui_extended/NavLink';
|
|
32
|
-
export * from './NoItemSelected';
|
|
33
|
-
export * from './NoItemSelected/dictionary';
|
|
32
|
+
export * from './NoItemSelected/NoItemSelected';
|
|
34
33
|
export * from './ObjectLogs';
|
|
35
34
|
export * from './ObjectLogs/dictionary';
|
|
36
35
|
export * from './PaperForm/PaperForm';
|
package/index.js
CHANGED
|
@@ -121,10 +121,9 @@ import { L as L8 } from "./components/LoadingError/LoadingError.js";
|
|
|
121
121
|
import { g as g19 } from "./components/LoadingError/dictionary.js";
|
|
122
122
|
import { M as M10 } from "./components/MFLoader/MFLoader.js";
|
|
123
123
|
import { g as g20 } from "./components/MFLoader/dictionary.js";
|
|
124
|
-
import { N as N3 } from "./components/NoItemSelected/
|
|
125
|
-
import { d as d6, g as g21 } from "./components/NoItemSelected/dictionary.js";
|
|
124
|
+
import { N as N3 } from "./components/NoItemSelected/NoItemSelected.js";
|
|
126
125
|
import { O } from "./components/ObjectLogs/index.js";
|
|
127
|
-
import { d as
|
|
126
|
+
import { d as d6, g as g21 } from "./components/ObjectLogs/dictionary.js";
|
|
128
127
|
import { P as P9 } from "./components/PaperForm/PaperForm.js";
|
|
129
128
|
import { P as P10 } from "./components/PDFViewer/PDFViewer.js";
|
|
130
129
|
import { H as H4 } from "./components/HelmetPage/index.js";
|
|
@@ -139,9 +138,9 @@ import { T as T4 } from "./components/ToastContainer/ToastContainer.js";
|
|
|
139
138
|
import { T as T5 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";
|
|
140
139
|
import { S as S6 } from "./components/SideBar/SideBar.js";
|
|
141
140
|
import { A as A11 } from "./components/AppBar/AppBar.js";
|
|
142
|
-
import { g as
|
|
141
|
+
import { g as g22 } from "./components/AppBar/dictionary.js";
|
|
143
142
|
import { A as A12 } from "./components/AccountPopover/AccountPopover.js";
|
|
144
|
-
import { g as
|
|
143
|
+
import { g as g23 } from "./components/AccountPopover/dictionary.js";
|
|
145
144
|
import { u as u8 } from "./components/popups/components/PopupsProvider/hooks/usePopupsStore/index.js";
|
|
146
145
|
import { a as a11, P as P12 } from "./components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
|
|
147
146
|
import { P as P13 } from "./components/popups/components/PopupsViewer/PopupsViewer.js";
|
|
@@ -161,7 +160,7 @@ import { L as L9 } from "./components/mui_extended/LinearProgress/index.js";
|
|
|
161
160
|
import { L as L10 } from "./components/mui_extended/LinkWithRoute/index.js";
|
|
162
161
|
import { L as L11 } from "./components/mui_extended/LoadingButton/LoadingButton.js";
|
|
163
162
|
import { P as P14 } from "./components/Pager/Pager.js";
|
|
164
|
-
import { g as
|
|
163
|
+
import { g as g24 } from "./components/Pager/dicctionary.js";
|
|
165
164
|
import { T as T7 } from "./components/mui_extended/Tab/Tab.js";
|
|
166
165
|
import { T as T8 } from "./components/mui_extended/Tooltip/Tooltip.js";
|
|
167
166
|
import { I as I6 } from "./components/mui_extended/IconButton/IconButton.js";
|
|
@@ -187,7 +186,7 @@ import { T as T19 } from "./components/mui_extended/ToggleIconButton/slots/Toggl
|
|
|
187
186
|
import { T as T20 } from "./components/mui_extended/ToggleIconButton/slots/ToggleIconButtonSlots.js";
|
|
188
187
|
import { a as a13, D as D7, M as M13 } from "./components/areas/contexts/DynamicMFParmsContext/index.js";
|
|
189
188
|
import { F, R as R21, u as u9 } from "./components/hook-form/RHFormContext/index.js";
|
|
190
|
-
import { g as
|
|
189
|
+
import { g as g25 } from "./components/hook-form/RHFormContext/dictionary.js";
|
|
191
190
|
import { u as u10 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
|
|
192
191
|
import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
|
|
193
192
|
import { a as a14, M as M14 } from "./contexts/ModalContext/index.js";
|
|
@@ -195,7 +194,7 @@ import { a as a15, R as R22 } from "./contexts/RealTimeContext/RealTimeContext.j
|
|
|
195
194
|
import { u as u11 } from "./hooks/useFormAddEdit/index.js";
|
|
196
195
|
import { u as u12 } from "./hooks/useModal/index.js";
|
|
197
196
|
import { u as u13 } from "./hooks/useTab/index.js";
|
|
198
|
-
import { g as
|
|
197
|
+
import { g as g26 } from "./hooks/useFormAddEdit/dictionary.js";
|
|
199
198
|
import { u as u14 } from "./hooks/useFormFocus/index.js";
|
|
200
199
|
import { u as u15 } from "./hooks/useInterval/index.js";
|
|
201
200
|
import { u as u16 } from "./hooks/useComponentSize/useComponentSize.js";
|
|
@@ -384,11 +383,10 @@ export {
|
|
|
384
383
|
c as createToaster,
|
|
385
384
|
d as defaultCommonActionsDictionary,
|
|
386
385
|
d4 as defaultModalDialogDictionary,
|
|
387
|
-
d6 as
|
|
388
|
-
d7 as defaultObjectLogDictionary,
|
|
386
|
+
d6 as defaultObjectLogDictionary,
|
|
389
387
|
d2 as draggableWindowClasses,
|
|
390
|
-
|
|
391
|
-
|
|
388
|
+
g23 as getAccountPopoverDictionary,
|
|
389
|
+
g22 as getAppBarDictionary,
|
|
392
390
|
b2 as getAreasComponentsDictionary,
|
|
393
391
|
g3 as getAreasDictionary,
|
|
394
392
|
g13 as getCommonActionsDictionary,
|
|
@@ -396,7 +394,7 @@ export {
|
|
|
396
394
|
g2 as getDataGridRowsFromSet,
|
|
397
395
|
g11 as getDistanceToNowFormatterComponentsDictionary,
|
|
398
396
|
a5 as getDynamicFilterComponentsDictionary,
|
|
399
|
-
|
|
397
|
+
g25 as getFormComponentsDictionary,
|
|
400
398
|
g9 as getFormatConcatenated,
|
|
401
399
|
u4 as getFormatDate,
|
|
402
400
|
g8 as getFormatPoints,
|
|
@@ -410,14 +408,13 @@ export {
|
|
|
410
408
|
a9 as getMenuActionsComponentsDictionary,
|
|
411
409
|
g18 as getModalDialogComponentsDictionary,
|
|
412
410
|
g17 as getModalDictionary,
|
|
413
|
-
g21 as
|
|
414
|
-
|
|
415
|
-
g25 as getPagerComponentsDictionary,
|
|
411
|
+
g21 as getObjectLogsComponentsDictionary,
|
|
412
|
+
g24 as getPagerComponentsDictionary,
|
|
416
413
|
g6 as getPeriodComponetsDictionary,
|
|
417
414
|
g5 as getRHFAutocompleteAsyncComponentsDictionary,
|
|
418
415
|
g4 as getRHFAutocompleteComponentsDictionary,
|
|
419
416
|
g7 as getUncertaintyFormat,
|
|
420
|
-
|
|
417
|
+
g26 as getformAddEditDictionary,
|
|
421
418
|
i as isEqualLayout,
|
|
422
419
|
k as isEqualLayouts,
|
|
423
420
|
i2 as isFeature,
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const componentName = "M4LNoItemSelected";
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { NoItemSelectedClassesType } from './types';
|
|
2
|
-
export declare const noItemSelectedClasses: NoItemSelectedClassesType;
|
|
3
|
-
export declare function getNoItemSelectedUtilityClass(slot: string): string;
|
|
4
|
-
/**
|
|
5
|
-
* TODO: Documentar
|
|
6
|
-
*/
|
|
7
|
-
export declare const useNoItemSelectedUtilityClasses: () => {
|
|
8
|
-
root: string;
|
|
9
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
|
|
2
|
-
import { unstable_composeClasses } from "@mui/base";
|
|
3
|
-
import { c as componentName } from "./constants.js";
|
|
4
|
-
generateUtilityClasses(
|
|
5
|
-
componentName,
|
|
6
|
-
[
|
|
7
|
-
/* elements */
|
|
8
|
-
"root"
|
|
9
|
-
/* states or variants of elements */
|
|
10
|
-
]
|
|
11
|
-
);
|
|
12
|
-
function getNoItemSelectedUtilityClass(slot) {
|
|
13
|
-
return generateUtilityClass(componentName, slot);
|
|
14
|
-
}
|
|
15
|
-
const useNoItemSelectedUtilityClasses = () => {
|
|
16
|
-
const slots = {
|
|
17
|
-
root: ["root"]
|
|
18
|
-
};
|
|
19
|
-
const composedClasses = unstable_composeClasses(slots, getNoItemSelectedUtilityClass, {});
|
|
20
|
-
return {
|
|
21
|
-
...composedClasses
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
export {
|
|
25
|
-
useNoItemSelectedUtilityClasses as u
|
|
26
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
|
|
3
|
-
import { W as WrapperNoItemSelected, L as Label, I as Img, a as WrapperSKTNoItemSelected } from "./styles.js";
|
|
4
|
-
import { Skeleton } from "@mui/material";
|
|
5
|
-
import { useMemo } from "react";
|
|
6
|
-
import { u as useNoItemSelectedUtilityClasses } from "./classes/index.js";
|
|
7
|
-
function NoItemSelected(props) {
|
|
8
|
-
const { image, message } = props;
|
|
9
|
-
const { host_static_assets, environment_assets } = useEnvironment();
|
|
10
|
-
const { getLabel } = useModuleDictionary();
|
|
11
|
-
const isSkeleton = useModuleSkeleton();
|
|
12
|
-
const defaultImage = useMemo(() => {
|
|
13
|
-
return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
|
|
14
|
-
}, []);
|
|
15
|
-
const classes = useNoItemSelectedUtilityClasses();
|
|
16
|
-
return /* @__PURE__ */ jsx(WrapperNoItemSelected, { className: classes.root, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
|
-
!message ? /* @__PURE__ */ jsx(Label, { children: getLabel("no_item_selected.message") }) : /* @__PURE__ */ jsx(Label, { children: message }),
|
|
18
|
-
!image ? /* @__PURE__ */ jsx(Img, { src: defaultImage }) : /* @__PURE__ */ jsx(Img, { src: image })
|
|
19
|
-
] }) : /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, { id: "WrapperSKTNoItemSelected", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "100%", height: "100%" }) }) });
|
|
20
|
-
}
|
|
21
|
-
export {
|
|
22
|
-
NoItemSelected as N
|
|
23
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const WrapperNoItemSelected: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2
|
-
export declare const Img: import('@emotion/styled').StyledComponent<import('../Image').ImageProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;
|
|
3
|
-
export declare const Label: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
4
|
-
export declare const WrapperSKTNoItemSelected: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { I as Image } from "../Image/Image.js";
|
|
2
|
-
import { styled } from "@mui/material/styles";
|
|
3
|
-
const WrapperNoItemSelected = styled("div")(({ theme }) => ({
|
|
4
|
-
...theme.components?.M4LNoItemSelected?.styleOverrides || {}
|
|
5
|
-
}));
|
|
6
|
-
const Img = styled(Image)(() => ({
|
|
7
|
-
display: "flex"
|
|
8
|
-
}));
|
|
9
|
-
const Label = styled("span")(({ theme }) => ({
|
|
10
|
-
...theme.colorSchemes.finalTheme.typography.body,
|
|
11
|
-
padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`
|
|
12
|
-
}));
|
|
13
|
-
const WrapperSKTNoItemSelected = styled("div")(() => ({
|
|
14
|
-
display: "flex",
|
|
15
|
-
width: "100%",
|
|
16
|
-
minWidth: "100%",
|
|
17
|
-
minHeight: "230px",
|
|
18
|
-
mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
|
|
19
|
-
WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
|
|
20
|
-
}));
|
|
21
|
-
export {
|
|
22
|
-
Img as I,
|
|
23
|
-
Label as L,
|
|
24
|
-
WrapperNoItemSelected as W,
|
|
25
|
-
WrapperSKTNoItemSelected as a
|
|
26
|
-
};
|