@votodigital-onpeui/react 0.1.45 → 0.1.46
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/dist/{chunk-SDB3VPGG.mjs → chunk-4MGS4V3T.mjs} +111 -50
- package/dist/chunk-4MGS4V3T.mjs.map +1 -0
- package/dist/{chunk-47VGJQ4W.mjs → chunk-J6CEIGJV.mjs} +3 -3
- package/dist/{chunk-47VGJQ4W.mjs.map → chunk-J6CEIGJV.mjs.map} +1 -1
- package/dist/{chunk-TH3PUGJ6.mjs → chunk-OQLX5JLQ.mjs} +2 -2
- package/dist/chunk-OQLX5JLQ.mjs.map +1 -0
- package/dist/{chunk-OP5VLP34.mjs → chunk-QM7ORWXU.mjs} +3 -3
- package/dist/{chunk-OP5VLP34.mjs.map → chunk-QM7ORWXU.mjs.map} +1 -1
- package/dist/components.js +108 -47
- package/dist/components.js.map +1 -1
- package/dist/components.mjs +3 -3
- package/dist/hooks.js.map +1 -1
- package/dist/hooks.mjs +2 -2
- package/dist/index.js +108 -47
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/modal.js.map +1 -1
- package/dist/modal.mjs +2 -2
- package/package.json +1 -1
- package/dist/chunk-SDB3VPGG.mjs.map +0 -1
- package/dist/chunk-TH3PUGJ6.mjs.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IconSpinnerDesktop, IconSpinnerMobile, IconCheck, IconQuestion, IconInfo, IconWarningNotRecommended } from './chunk-M2KQXQLY.mjs';
|
|
2
|
-
import { Modal } from './chunk-
|
|
2
|
+
import { Modal } from './chunk-OQLX5JLQ.mjs';
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useState, useEffect } from 'react';
|
|
5
5
|
|
|
@@ -282,5 +282,5 @@ var ModalLoading = ({
|
|
|
282
282
|
};
|
|
283
283
|
|
|
284
284
|
export { Button, ModalConfirm, ModalLoading };
|
|
285
|
-
//# sourceMappingURL=chunk-
|
|
286
|
-
//# sourceMappingURL=chunk-
|
|
285
|
+
//# sourceMappingURL=chunk-QM7ORWXU.mjs.map
|
|
286
|
+
//# sourceMappingURL=chunk-QM7ORWXU.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Feedback/ModalConfirm/ModalConfirm.tsx","../src/components/Feedback/ModalLoading/ModalLoading.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-OP5VLP34.mjs","sourcesContent":["type ButtonColor =\n | \"blue\"\n | \"skyblue\"\n | \"skyblue-light\"\n | \"yellow\"\n | \"light-skyblue\"\n | \"gray\"\n | \"gray-light\"\n | \"gray-extra-light\"\n | \"red\"\n | \"dark-gray\"\n | \"green\"\n | \"yellow-light\"\n | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n color: ButtonColor;\n title: string;\n size?: ButtonSize;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n blue: \"bg-onpe-blue\",\n skyblue: \"bg-onpe-skyblue\",\n \"skyblue-light\": \"bg-onpe-skyblue-light\",\n yellow: \"bg-onpe-yellow\",\n \"light-skyblue\": \"bg-onpe-light-skyblue\",\n gray: \"bg-onpe-gray\",\n \"gray-light\": \"bg-onpe-gray-light\",\n \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n red: \"bg-onpe-red\",\n \"dark-gray\": \"bg-onpe-dark-gray\",\n green: \"bg-onpe-green\",\n \"yellow-light\": \"bg-onpe-yellow-light\",\n primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n small: \"h-10 text-sm\",\n normal: \"h-12 text-base\",\n large: \"h-14 text-lg\",\n};\n\nexport function Button({\n color,\n title,\n size = \"normal\",\n className = \"\",\n ...props\n}: ButtonProps) {\n return (\n <button\n className={[\n \"inline-flex items-center justify-center\",\n \"min-w-[200px] border-none\",\n \"text-white font-semibold cursor-pointer\",\n \"transition-all duration-300 ease-in-out\",\n \"disabled:cursor-default disabled:!bg-onpe-gray\",\n colorClasses[color],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n {...props}\n >\n {title}\n </button>\n );\n}\n\nexport default Button;\n","import { type ReactNode } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { Button } from \"../../Button/Button\";\r\nimport { IconCheck } from \"../../../icons/Actions/IconCheck\";\r\nimport { IconWarningNotRecommended } from \"../../../icons\";\r\nimport { IconQuestion } from \"../../../icons/Actions/IconQuestion\";\r\nimport { IconInfo } from \"../../../icons/Actions/IconInfo\";\r\n\r\nexport type ModalType = \"warning\" | \"success\" | \"question\" | \"info\" | \"none\";\r\n\r\n/** Mapa de override de color a clase CSS (icono + título) */\r\nconst colorOverrideMap: Record<string, string> = {\r\n red: \"text-onpe-red\",\r\n blue: \"text-onpe-blue\",\r\n skyblue: \"text-onpe-skyblue\",\r\n yellow: \"text-onpe-yellow\",\r\n};\r\n\r\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\r\n if (type === \"none\") return null;\r\n if (type === \"success\") {\r\n return <IconCheck role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"question\") {\r\n return <IconQuestion role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"info\") {\r\n return <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n // error | warning\r\n return <IconWarningNotRecommended role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n}\r\n\r\nconst defaultTitleByType: Record<string, string> = {\r\n success: \"Confirmación\",\r\n warning: \"Advertencia\",\r\n question: \"Atención\",\r\n info: \"Información\",\r\n};\r\n\r\nexport interface ModalConfirmProps {\r\n isOpen: boolean;\r\n onClose: () => void;\r\n title?: string;\r\n /** Contenido del modal (string o JSX) */\r\n message?: ReactNode;\r\n /** Alias de message */\r\n content?: ReactNode;\r\n /** Tipo semántico: determina icono, color de título y color de botón confirmar */\r\n type?: ModalType;\r\n /**\r\n * \"single\" → un botón \"Confirmar\".\r\n * \"double\" → \"Cancelar\" + \"Confirmar\".\r\n * \"confirm\" → \"No\" + \"Sí\" (diálogo de confirmación Sí/No).\r\n */\r\n buttonMode?: \"single\" | \"double\" | \"confirm\";\r\n /** Deshabilita el botón confirmar */\r\n disabledConfirmButton?: boolean;\r\n /** Deshabilita el cierre del modal */\r\n closeDisabled?: boolean;\r\n /**\r\n * Override del color del icono y título.\r\n * Si no se provee, se deriva automáticamente del `type`.\r\n */\r\n color?: \"red\" | \"blue\" | \"skyblue\" | \"yellow\";\r\n onConfirm?: () => void | Promise<void>;\r\n onCancel?: () => void | Promise<void>;\r\n textButtonConfirm?: string;\r\n textButtonCancel?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n withoutAutoClose?: boolean;\r\n disableFocus?: boolean;\r\n /** Muestra el botón X para cerrar el modal */\r\n closeButton?: boolean;\r\n /** Alinea el texto del mensaje a la izquierda (justify) en vez de centrado */\r\n alignJustify?: boolean;\r\n /** Alinea el modal al tope de la pantalla en vez de al centro */\r\n alignTop?: boolean;\r\n /** Habilita animación de entrada/salida (default: true) */\r\n animated?: boolean;\r\n /** Bloquea el scroll del body mientras el modal está abierto (default: true) */\r\n preventBodyScroll?: boolean;\r\n}\r\n\r\nexport const ModalConfirm = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n withoutAutoClose = false,\r\n title,\r\n message,\r\n content,\r\n type = \"warning\",\r\n buttonMode,\r\n disabledConfirmButton = false,\r\n closeDisabled = false,\r\n color,\r\n onConfirm = () => {},\r\n onCancel = () => {},\r\n textButtonConfirm,\r\n textButtonCancel,\r\n className = \"\",\r\n zIndexLevel = 100,\r\n disableFocus = false,\r\n closeButton = false,\r\n alignJustify = false,\r\n alignTop = false,\r\n animated = true,\r\n preventBodyScroll = true,\r\n}: ModalConfirmProps) => {\r\n const titleId = \"modal-confirm-title\";\r\n const messageId = \"modal-confirm-message\";\r\n\r\n const effectiveTitle = title ?? defaultTitleByType[type] ?? \"\";\r\n // Título e ícono siempre skyblue por defecto; `color` es el único override\r\n const effectiveColorClass = color\r\n ? (colorOverrideMap[color] ?? \"text-onpe-skyblue\")\r\n : \"text-onpe-skyblue\";\r\n const effectiveButtonMode = buttonMode ?? (type === \"question\" ? \"confirm\" : \"single\");\r\n const isConfirmMode = effectiveButtonMode === \"confirm\";\r\n const showTwoButtons = effectiveButtonMode === \"double\" || isConfirmMode;\r\n const confirmLabel = textButtonConfirm ?? (isConfirmMode ? \"Sí\" : effectiveButtonMode === \"double\" ? \"Confirmar\" : \"Aceptar\");\r\n const cancelLabel = textButtonCancel ?? (isConfirmMode ? \"No\" : \"Cancelar\");\r\n\r\n const handleConfirm = async () => {\r\n try {\r\n await onConfirm();\r\n if (!withoutAutoClose) onClose();\r\n } catch (error) {\r\n console.error(\"Error en handleConfirm:\", error);\r\n if (!withoutAutoClose) onClose();\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n onCancel();\r\n if (!withoutAutoClose) onClose();\r\n };\r\n\r\n return (\r\n <Modal\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={`bg-white pt-[30px] pb-[30px] px-[30px] max-w-[719px]! ${className}`}\r\n closeButton={closeButton}\r\n closeDisabled={closeDisabled}\r\n zIndexLevel={zIndexLevel}\r\n aria-labelledby={titleId}\r\n aria-describedby={messageId}\r\n disableFocus={disableFocus}\r\n alignTop={alignTop}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n {/* Icono */}\r\n <div className=\"flex items-center justify-center\">\r\n {renderIcon(type, effectiveColorClass)}\r\n </div>\r\n\r\n {/* Título */}\r\n <p\r\n id={titleId}\r\n className={[\r\n \"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4\",\r\n effectiveColorClass,\r\n ].join(\" \")}\r\n >\r\n {effectiveTitle}\r\n </p>\r\n\r\n {/* Mensaje / Contenido */}\r\n {message && (\r\n typeof message === \"string\" ? (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n dangerouslySetInnerHTML={{ __html: message }}\r\n />\r\n ) : (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n >\r\n {message}\r\n </div>\r\n )\r\n )}\r\n {content && (\r\n <div\r\n id={message ? undefined : messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n >\r\n {content}\r\n </div>\r\n )}\r\n\r\n {/* Mobile: apilado */}\r\n <div className=\"flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden\">\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Desktop: fila */}\r\n <div className=\"hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11\">\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n </div>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalConfirm;\r\n","import { type ReactNode, useEffect, useState } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { IconSpinnerDesktop } from \"../../../icons/Actions/IconSpinnerDesktop\";\r\nimport { IconSpinnerMobile } from \"../../../icons/Actions/IconSpinnerMobile\";\r\n\r\nexport interface ModalLoadingProps {\r\n isOpen: boolean;\r\n onClose?: () => void;\r\n message?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n animated?: boolean;\r\n preventBodyScroll?: boolean;\r\n /** Spinner personalizado. Si no se provee, se usa el spinner por defecto de la librería. */\r\n spinner?: ReactNode;\r\n}\r\n\r\nexport const ModalLoading = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n message = \"Cargando...\",\r\n className = \"\",\r\n zIndexLevel = 100,\r\n animated = true,\r\n preventBodyScroll = true,\r\n spinner,\r\n}: ModalLoadingProps) => {\r\n const [announceMessage, setAnnounceMessage] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (!isOpen) {\r\n setAnnounceMessage(\"\");\r\n return;\r\n }\r\n setAnnounceMessage(\"\");\r\n const t = globalThis.setTimeout(() => {\r\n setAnnounceMessage(message);\r\n }, 150);\r\n return () => {\r\n globalThis.clearTimeout(t);\r\n };\r\n }, [isOpen, message]);\r\n\r\n return (\r\n <Modal\r\n disableFocus\r\n zIndexLevel={zIndexLevel}\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={className}\r\n closeDisabled\r\n whitoutBackground={true}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n {announceMessage}\r\n </div>\r\n {spinner ?? (\r\n <>\r\n <IconSpinnerDesktop\r\n className=\"hidden md:block text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n <IconSpinnerMobile\r\n className=\"block md:hidden text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n </>\r\n )}\r\n <p className=\"text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20\">\r\n {message}\r\n </p>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalLoading;\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Feedback/ModalConfirm/ModalConfirm.tsx","../src/components/Feedback/ModalLoading/ModalLoading.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-QM7ORWXU.mjs","sourcesContent":["type ButtonColor =\n | \"blue\"\n | \"skyblue\"\n | \"skyblue-light\"\n | \"yellow\"\n | \"light-skyblue\"\n | \"gray\"\n | \"gray-light\"\n | \"gray-extra-light\"\n | \"red\"\n | \"dark-gray\"\n | \"green\"\n | \"yellow-light\"\n | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n color: ButtonColor;\n title: string;\n size?: ButtonSize;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n blue: \"bg-onpe-blue\",\n skyblue: \"bg-onpe-skyblue\",\n \"skyblue-light\": \"bg-onpe-skyblue-light\",\n yellow: \"bg-onpe-yellow\",\n \"light-skyblue\": \"bg-onpe-light-skyblue\",\n gray: \"bg-onpe-gray\",\n \"gray-light\": \"bg-onpe-gray-light\",\n \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n red: \"bg-onpe-red\",\n \"dark-gray\": \"bg-onpe-dark-gray\",\n green: \"bg-onpe-green\",\n \"yellow-light\": \"bg-onpe-yellow-light\",\n primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n small: \"h-10 text-sm\",\n normal: \"h-12 text-base\",\n large: \"h-14 text-lg\",\n};\n\nexport function Button({\n color,\n title,\n size = \"normal\",\n className = \"\",\n ...props\n}: ButtonProps) {\n return (\n <button\n className={[\n \"inline-flex items-center justify-center\",\n \"min-w-[200px] border-none\",\n \"text-white font-semibold cursor-pointer\",\n \"transition-all duration-300 ease-in-out\",\n \"disabled:cursor-default disabled:!bg-onpe-gray\",\n colorClasses[color],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n {...props}\n >\n {title}\n </button>\n );\n}\n\nexport default Button;\n","import { type ReactNode } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { Button } from \"../../Button/Button\";\r\nimport { IconCheck } from \"../../../icons/Actions/IconCheck\";\r\nimport { IconWarningNotRecommended } from \"../../../icons\";\r\nimport { IconQuestion } from \"../../../icons/Actions/IconQuestion\";\r\nimport { IconInfo } from \"../../../icons/Actions/IconInfo\";\r\n\r\nexport type ModalType = \"warning\" | \"success\" | \"question\" | \"info\" | \"none\";\r\n\r\n/** Mapa de override de color a clase CSS (icono + título) */\r\nconst colorOverrideMap: Record<string, string> = {\r\n red: \"text-onpe-red\",\r\n blue: \"text-onpe-blue\",\r\n skyblue: \"text-onpe-skyblue\",\r\n yellow: \"text-onpe-yellow\",\r\n};\r\n\r\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\r\n if (type === \"none\") return null;\r\n if (type === \"success\") {\r\n return <IconCheck role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"question\") {\r\n return <IconQuestion role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"info\") {\r\n return <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n // error | warning\r\n return <IconWarningNotRecommended role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n}\r\n\r\nconst defaultTitleByType: Record<string, string> = {\r\n success: \"Confirmación\",\r\n warning: \"Advertencia\",\r\n question: \"Atención\",\r\n info: \"Información\",\r\n};\r\n\r\nexport interface ModalConfirmProps {\r\n isOpen: boolean;\r\n onClose: () => void;\r\n title?: string;\r\n /** Contenido del modal (string o JSX) */\r\n message?: ReactNode;\r\n /** Alias de message */\r\n content?: ReactNode;\r\n /** Tipo semántico: determina icono, color de título y color de botón confirmar */\r\n type?: ModalType;\r\n /**\r\n * \"single\" → un botón \"Confirmar\".\r\n * \"double\" → \"Cancelar\" + \"Confirmar\".\r\n * \"confirm\" → \"No\" + \"Sí\" (diálogo de confirmación Sí/No).\r\n */\r\n buttonMode?: \"single\" | \"double\" | \"confirm\";\r\n /** Deshabilita el botón confirmar */\r\n disabledConfirmButton?: boolean;\r\n /** Deshabilita el cierre del modal */\r\n closeDisabled?: boolean;\r\n /**\r\n * Override del color del icono y título.\r\n * Si no se provee, se deriva automáticamente del `type`.\r\n */\r\n color?: \"red\" | \"blue\" | \"skyblue\" | \"yellow\";\r\n onConfirm?: () => void | Promise<void>;\r\n onCancel?: () => void | Promise<void>;\r\n textButtonConfirm?: string;\r\n textButtonCancel?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n withoutAutoClose?: boolean;\r\n disableFocus?: boolean;\r\n /** Muestra el botón X para cerrar el modal */\r\n closeButton?: boolean;\r\n /** Alinea el texto del mensaje a la izquierda (justify) en vez de centrado */\r\n alignJustify?: boolean;\r\n /** Alinea el modal al tope de la pantalla en vez de al centro */\r\n alignTop?: boolean;\r\n /** Habilita animación de entrada/salida (default: true) */\r\n animated?: boolean;\r\n /** Bloquea el scroll del body mientras el modal está abierto (default: true) */\r\n preventBodyScroll?: boolean;\r\n}\r\n\r\nexport const ModalConfirm = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n withoutAutoClose = false,\r\n title,\r\n message,\r\n content,\r\n type = \"warning\",\r\n buttonMode,\r\n disabledConfirmButton = false,\r\n closeDisabled = false,\r\n color,\r\n onConfirm = () => {},\r\n onCancel = () => {},\r\n textButtonConfirm,\r\n textButtonCancel,\r\n className = \"\",\r\n zIndexLevel = 100,\r\n disableFocus = false,\r\n closeButton = false,\r\n alignJustify = false,\r\n alignTop = false,\r\n animated = true,\r\n preventBodyScroll = true,\r\n}: ModalConfirmProps) => {\r\n const titleId = \"modal-confirm-title\";\r\n const messageId = \"modal-confirm-message\";\r\n\r\n const effectiveTitle = title ?? defaultTitleByType[type] ?? \"\";\r\n // Título e ícono siempre skyblue por defecto; `color` es el único override\r\n const effectiveColorClass = color\r\n ? (colorOverrideMap[color] ?? \"text-onpe-skyblue\")\r\n : \"text-onpe-skyblue\";\r\n const effectiveButtonMode = buttonMode ?? (type === \"question\" ? \"confirm\" : \"single\");\r\n const isConfirmMode = effectiveButtonMode === \"confirm\";\r\n const showTwoButtons = effectiveButtonMode === \"double\" || isConfirmMode;\r\n const confirmLabel = textButtonConfirm ?? (isConfirmMode ? \"Sí\" : effectiveButtonMode === \"double\" ? \"Confirmar\" : \"Aceptar\");\r\n const cancelLabel = textButtonCancel ?? (isConfirmMode ? \"No\" : \"Cancelar\");\r\n\r\n const handleConfirm = async () => {\r\n try {\r\n await onConfirm();\r\n if (!withoutAutoClose) onClose();\r\n } catch (error) {\r\n console.error(\"Error en handleConfirm:\", error);\r\n if (!withoutAutoClose) onClose();\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n onCancel();\r\n if (!withoutAutoClose) onClose();\r\n };\r\n\r\n return (\r\n <Modal\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={`bg-white pt-[30px] pb-[30px] px-[30px] max-w-[719px]! ${className}`}\r\n closeButton={closeButton}\r\n closeDisabled={closeDisabled}\r\n zIndexLevel={zIndexLevel}\r\n aria-labelledby={titleId}\r\n aria-describedby={messageId}\r\n disableFocus={disableFocus}\r\n alignTop={alignTop}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n {/* Icono */}\r\n <div className=\"flex items-center justify-center\">\r\n {renderIcon(type, effectiveColorClass)}\r\n </div>\r\n\r\n {/* Título */}\r\n <p\r\n id={titleId}\r\n className={[\r\n \"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4\",\r\n effectiveColorClass,\r\n ].join(\" \")}\r\n >\r\n {effectiveTitle}\r\n </p>\r\n\r\n {/* Mensaje / Contenido */}\r\n {message && (\r\n typeof message === \"string\" ? (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n dangerouslySetInnerHTML={{ __html: message }}\r\n />\r\n ) : (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n >\r\n {message}\r\n </div>\r\n )\r\n )}\r\n {content && (\r\n <div\r\n id={message ? undefined : messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n >\r\n {content}\r\n </div>\r\n )}\r\n\r\n {/* Mobile: apilado */}\r\n <div className=\"flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden\">\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Desktop: fila */}\r\n <div className=\"hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11\">\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n </div>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalConfirm;\r\n","import { type ReactNode, useEffect, useState } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { IconSpinnerDesktop } from \"../../../icons/Actions/IconSpinnerDesktop\";\r\nimport { IconSpinnerMobile } from \"../../../icons/Actions/IconSpinnerMobile\";\r\n\r\nexport interface ModalLoadingProps {\r\n isOpen: boolean;\r\n onClose?: () => void;\r\n message?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n animated?: boolean;\r\n preventBodyScroll?: boolean;\r\n /** Spinner personalizado. Si no se provee, se usa el spinner por defecto de la librería. */\r\n spinner?: ReactNode;\r\n}\r\n\r\nexport const ModalLoading = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n message = \"Cargando...\",\r\n className = \"\",\r\n zIndexLevel = 100,\r\n animated = true,\r\n preventBodyScroll = true,\r\n spinner,\r\n}: ModalLoadingProps) => {\r\n const [announceMessage, setAnnounceMessage] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (!isOpen) {\r\n setAnnounceMessage(\"\");\r\n return;\r\n }\r\n setAnnounceMessage(\"\");\r\n const t = globalThis.setTimeout(() => {\r\n setAnnounceMessage(message);\r\n }, 150);\r\n return () => {\r\n globalThis.clearTimeout(t);\r\n };\r\n }, [isOpen, message]);\r\n\r\n return (\r\n <Modal\r\n disableFocus\r\n zIndexLevel={zIndexLevel}\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={className}\r\n closeDisabled\r\n whitoutBackground={true}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n {announceMessage}\r\n </div>\r\n {spinner ?? (\r\n <>\r\n <IconSpinnerDesktop\r\n className=\"hidden md:block text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n <IconSpinnerMobile\r\n className=\"block md:hidden text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n </>\r\n )}\r\n <p className=\"text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20\">\r\n {message}\r\n </p>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalLoading;\r\n"]}
|
package/dist/components.js
CHANGED
|
@@ -1405,7 +1405,7 @@ var ModalDnieVersions = ({
|
|
|
1405
1405
|
zIndexLevel,
|
|
1406
1406
|
isOpen,
|
|
1407
1407
|
onClose,
|
|
1408
|
-
className: `bg-white max-w-[590px]! pt-[30px] pb-[38px] ${className}`,
|
|
1408
|
+
className: `bg-white max-w-[590px]! pt-[30px] pb-[38px] md:pt-[35px] px-4 md:pb-[54px] md:px-8 ${className}`,
|
|
1409
1409
|
closeButton: true,
|
|
1410
1410
|
children: [
|
|
1411
1411
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1426,20 +1426,28 @@ var ModalDnieVersions = ({
|
|
|
1426
1426
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 1" }),
|
|
1427
1427
|
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 1" })
|
|
1428
1428
|
] }) }),
|
|
1429
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
"."
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1429
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1430
|
+
"ul",
|
|
1431
|
+
{
|
|
1432
|
+
role: "none",
|
|
1433
|
+
className: "text-sm list-disc text-justify self-start pl-8",
|
|
1434
|
+
children: [
|
|
1435
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
|
|
1436
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte delantera del DNI electr\xF3nico." }),
|
|
1437
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte delantera del DNIe." })
|
|
1438
|
+
] }) }),
|
|
1439
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
|
|
1440
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatible solo con el lector del DNI electr\xF3nico en PC, Mac o laptop." }),
|
|
1441
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
|
|
1442
|
+
"Compatible solo con el lector del DNIe en",
|
|
1443
|
+
" ",
|
|
1444
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "PC, Mac o laptop" }),
|
|
1445
|
+
"."
|
|
1446
|
+
] })
|
|
1447
|
+
] }) })
|
|
1448
|
+
]
|
|
1449
|
+
}
|
|
1450
|
+
)
|
|
1443
1451
|
] }),
|
|
1444
1452
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[240px] sm:w-[200px] relative flex justify-center", children: iconDnie1 })
|
|
1445
1453
|
] }),
|
|
@@ -1449,20 +1457,31 @@ var ModalDnieVersions = ({
|
|
|
1449
1457
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "DNI electr\xF3nico versi\xF3n 2 y 3" }),
|
|
1450
1458
|
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "DNIe versi\xF3n 2 y 3" })
|
|
1451
1459
|
] }) }),
|
|
1452
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
"."
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1460
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1461
|
+
"ul",
|
|
1462
|
+
{
|
|
1463
|
+
role: "none",
|
|
1464
|
+
className: "text-sm list-disc text-justify self-start pl-8",
|
|
1465
|
+
children: [
|
|
1466
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
|
|
1467
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Chip en la parte posterior del DNI electr\xF3nico." }),
|
|
1468
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "Chip en la parte posterior del DNIe." })
|
|
1469
|
+
] }) }),
|
|
1470
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { tabIndex: 0, children: [
|
|
1471
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Compatibles con el lector del DNI electr\xF3nico en PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles." }),
|
|
1472
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
|
|
1473
|
+
"Compatibles con el lector del DNIe en",
|
|
1474
|
+
" ",
|
|
1475
|
+
/* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
|
|
1476
|
+
" ",
|
|
1477
|
+
"PC, Mac o laptop y tecnolog\xEDa NFC (ISO 14443-B) en m\xF3viles"
|
|
1478
|
+
] }),
|
|
1479
|
+
"."
|
|
1480
|
+
] })
|
|
1481
|
+
] }) })
|
|
1482
|
+
]
|
|
1483
|
+
}
|
|
1484
|
+
)
|
|
1466
1485
|
] }),
|
|
1467
1486
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[240px] sm:w-[200px] h-[181px] relative", children: [
|
|
1468
1487
|
iconDnie2,
|
|
@@ -1491,10 +1510,17 @@ var ModalNfc = ({
|
|
|
1491
1510
|
zIndexLevel,
|
|
1492
1511
|
isOpen,
|
|
1493
1512
|
onClose,
|
|
1494
|
-
className: `bg-white max-w-[600px]! pt-[46px] pb-[46px] px-[30px] md:px-[50px] ${className}`,
|
|
1513
|
+
className: `bg-white max-w-[600px]! pt-[46px] pb-[46px] px-[30px] md:px-[50px] md:pt-[35px] md:pb-[54px] ${className}`,
|
|
1495
1514
|
closeButton: true,
|
|
1496
1515
|
children: [
|
|
1497
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1516
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1517
|
+
"h2",
|
|
1518
|
+
{
|
|
1519
|
+
className: "text-center text-onpe-blue font-bold text-base",
|
|
1520
|
+
tabIndex: 0,
|
|
1521
|
+
children: "\xBFC\xF3mo saber si tu dispositivo m\xF3vil tiene NFC?"
|
|
1522
|
+
}
|
|
1523
|
+
),
|
|
1498
1524
|
/* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-6 items-center mt-8 text-sm w-full", children: [
|
|
1499
1525
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
|
|
1500
1526
|
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-justify mb-3", tabIndex: 0, children: [
|
|
@@ -1502,14 +1528,28 @@ var ModalNfc = ({
|
|
|
1502
1528
|
"Celular Android"
|
|
1503
1529
|
] }),
|
|
1504
1530
|
/* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: [
|
|
1505
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1531
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1532
|
+
"li",
|
|
1533
|
+
{
|
|
1534
|
+
role: "presentation",
|
|
1535
|
+
className: "text-sm text-left mb-2 tracking-[0.15px]",
|
|
1536
|
+
children: "Desde la barra de notificaciones, simplemente deslizando hacia abajo desde tu pantalla y buscando el \xEDcono del NFC."
|
|
1537
|
+
}
|
|
1538
|
+
),
|
|
1539
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1540
|
+
"li",
|
|
1541
|
+
{
|
|
1542
|
+
role: "presentation",
|
|
1543
|
+
className: "text-sm text-left mb-2 tracking-[0.15px]",
|
|
1544
|
+
children: [
|
|
1545
|
+
"Otra forma es ir hacia Ajustes",
|
|
1546
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
|
|
1547
|
+
"Conexiones o Redes Inal\xE1mbricas",
|
|
1548
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " > " }),
|
|
1549
|
+
'Buscar "NFC".'
|
|
1550
|
+
]
|
|
1551
|
+
}
|
|
1552
|
+
)
|
|
1513
1553
|
] })
|
|
1514
1554
|
] }),
|
|
1515
1555
|
iconNfc1,
|
|
@@ -1518,16 +1558,37 @@ var ModalNfc = ({
|
|
|
1518
1558
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: "2." }),
|
|
1519
1559
|
"Celular iPhone"
|
|
1520
1560
|
] }),
|
|
1521
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1561
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { role: "presentation", className: "list-disc pl-[26px] mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1562
|
+
"li",
|
|
1563
|
+
{
|
|
1564
|
+
role: "presentation",
|
|
1565
|
+
className: "text-sm text-left mb-2 tracking-[0.15px]",
|
|
1566
|
+
children: "Todos los modelos iPhone 7 en adelante ya cuentan con tecnolog\xEDa NFC activa."
|
|
1567
|
+
}
|
|
1568
|
+
) })
|
|
1522
1569
|
] }),
|
|
1523
1570
|
iconNfc2,
|
|
1524
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1571
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1572
|
+
"h2",
|
|
1573
|
+
{
|
|
1574
|
+
className: "text-center text-onpe-blue font-bold my-5 text-base",
|
|
1575
|
+
tabIndex: 0,
|
|
1576
|
+
children: "\xBFC\xF3mo usar el NFC correctamente?"
|
|
1577
|
+
}
|
|
1578
|
+
),
|
|
1579
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1580
|
+
"ol",
|
|
1581
|
+
{
|
|
1582
|
+
role: "presentation",
|
|
1583
|
+
className: "text-sm text-justify list-decimal list-outside",
|
|
1584
|
+
children: [
|
|
1585
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Activa el NFC en tu celular." }),
|
|
1586
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Busca en internet d\xF3nde est\xE1 el lector NFC seg\xFAn tu modelo." }),
|
|
1587
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: "Coloca tu DNIe sobre esa zona hasta que recibas la confirmaci\xF3n del sistema." }),
|
|
1588
|
+
/* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "mb-2", children: 'Puedes consultar los videos "Aprende como leer tu DNIe con NFC":' })
|
|
1589
|
+
]
|
|
1590
|
+
}
|
|
1591
|
+
) }),
|
|
1531
1592
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-5 justify-center items-center", children: [
|
|
1532
1593
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1533
1594
|
"a",
|