@onpe/ui 1.2.40 → 1.2.42
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/README.md +192 -13
- package/dist/components/Feedback/ModalDnieVersions/ModalDnieVersions.d.ts +9 -0
- package/dist/components/Feedback/ModalDnieVersions/index.d.ts +4 -0
- package/dist/components/Feedback/ModalNfc/ModalNfc.d.ts +9 -0
- package/dist/components/Feedback/ModalNfc/index.d.ts +4 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components.css +416 -285
- package/dist/components.esm.css +416 -285
- package/dist/components.esm.js +34 -29
- package/dist/components.js +34 -29
- package/dist/icons/Actions/IconCloseRadius/IconCloseRadius.d.ts +4 -0
- package/dist/icons/Actions/IconCloseRadius/index.d.ts +2 -0
- package/dist/icons/Actions/IconMobileNfc/IconMobileNfc.d.ts +4 -0
- package/dist/icons/Actions/IconMobileNfc/index.d.ts +4 -0
- package/dist/icons/Actions/index.d.ts +1 -0
- package/dist/index.css +416 -285
- package/dist/index.esm.css +416 -285
- package/dist/index.esm.js +36 -29
- package/dist/index.js +36 -29
- package/package.json +1 -1
package/dist/components.esm.js
CHANGED
|
@@ -124,7 +124,7 @@ var Overlay = function (_a) {
|
|
|
124
124
|
return jsx("div", { onClick: onClick, className: "onpe-overlay ".concat(getVisibilityClass(), " ").concat(getColorClass()) });
|
|
125
125
|
};
|
|
126
126
|
|
|
127
|
-
var
|
|
127
|
+
var IconCloseRadius = function (props) { return (jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, viewBox: "0 0 28 28", fill: "none" }, props, { children: jsx("path", { d: "M14 0C6.2 0 0 6.2 0 14C0 21.8 6.2 28 14 28C21.8 28 28 21.8 28 14C28 6.2 21.8 0 14 0ZM19.4 21L14 15.6L8.6 21L7 19.4L12.4 14L7 8.6L8.6 7L14 12.4L19.4 7L21 8.6L15.6 14L21 19.4L19.4 21Z", fill: "currentColor" }) }))); };
|
|
128
128
|
|
|
129
129
|
var Modal = function (_a) {
|
|
130
130
|
var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.whitoutBackground, whitoutBackground = _b === void 0 ? false : _b, _c = _a.topAbsolute, topAbsolute = _c === void 0 ? false : _c, _d = _a.closeButton, closeButton = _d === void 0 ? false : _d, _e = _a.closeDisabled, closeDisabled = _e === void 0 ? false : _e, _f = _a.overlayColor, overlayColor = _f === void 0 ? "blue" : _f, props = __rest(_a, ["isOpen", "onClose", "children", "whitoutBackground", "topAbsolute", "closeButton", "closeDisabled", "overlayColor"]);
|
|
@@ -144,37 +144,42 @@ var Modal = function (_a) {
|
|
|
144
144
|
// Resetear scroll del modal cuando se abre
|
|
145
145
|
useEffect(function () {
|
|
146
146
|
if (isOpen) {
|
|
147
|
+
// Función para resetear scroll de cualquier modal content
|
|
148
|
+
var resetModalScroll = function () {
|
|
149
|
+
// Buscar todos los elementos de contenido del modal
|
|
150
|
+
var modalContentElements = document.querySelectorAll(".onpe-modal-content");
|
|
151
|
+
modalContentElements.forEach(function (element) {
|
|
152
|
+
var htmlElement = element;
|
|
153
|
+
// Desactivar animación temporalmente para reset instantáneo
|
|
154
|
+
htmlElement.style.scrollBehavior = "auto";
|
|
155
|
+
htmlElement.scrollTop = 0;
|
|
156
|
+
// Forzar el reset con requestAnimationFrame
|
|
157
|
+
requestAnimationFrame(function () {
|
|
158
|
+
htmlElement.scrollTop = 0;
|
|
159
|
+
// Reactivar animación después del reset
|
|
160
|
+
setTimeout(function () {
|
|
161
|
+
htmlElement.style.scrollBehavior = "smooth";
|
|
162
|
+
}, 10);
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
};
|
|
147
166
|
// Resetear inmediatamente cuando se abre
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
setTimeout(function () {
|
|
155
|
-
modalContentElement_1.style.scrollBehavior = "smooth";
|
|
156
|
-
}, 10);
|
|
157
|
-
}
|
|
158
|
-
// También resetear después de un pequeño delay por si acaso
|
|
159
|
-
setTimeout(function () {
|
|
160
|
-
var modalContentElementDelayed = document.querySelector(".onpe-modal-content.onpe-modal-with-background");
|
|
161
|
-
if (modalContentElementDelayed) {
|
|
162
|
-
modalContentElementDelayed.style.scrollBehavior = "auto";
|
|
163
|
-
modalContentElementDelayed.scrollTop = 0;
|
|
164
|
-
setTimeout(function () {
|
|
165
|
-
modalContentElementDelayed.style.scrollBehavior = "smooth";
|
|
166
|
-
}, 10);
|
|
167
|
-
}
|
|
168
|
-
}, 50);
|
|
167
|
+
resetModalScroll();
|
|
168
|
+
// Resetear múltiples veces para asegurar que funcione
|
|
169
|
+
setTimeout(resetModalScroll, 10);
|
|
170
|
+
setTimeout(resetModalScroll, 50);
|
|
171
|
+
setTimeout(resetModalScroll, 100);
|
|
172
|
+
setTimeout(resetModalScroll, 200);
|
|
169
173
|
}
|
|
170
174
|
else {
|
|
171
175
|
// Resetear scroll cuando se cierra para que no se vea la animación al reabrir
|
|
172
|
-
var
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
var modalContentElements = document.querySelectorAll(".onpe-modal-content");
|
|
177
|
+
modalContentElements.forEach(function (element) {
|
|
178
|
+
var htmlElement = element;
|
|
179
|
+
htmlElement.style.scrollBehavior = "auto";
|
|
180
|
+
htmlElement.scrollTop = 0;
|
|
181
|
+
htmlElement.style.scrollBehavior = "smooth";
|
|
182
|
+
});
|
|
178
183
|
}
|
|
179
184
|
}, [isOpen]);
|
|
180
185
|
var getContainerClass = function () {
|
|
@@ -190,7 +195,7 @@ var Modal = function (_a) {
|
|
|
190
195
|
var customClass = props.className || "";
|
|
191
196
|
return "".concat(baseClass, " ").concat(backgroundClass, " ").concat(customClass).trim();
|
|
192
197
|
};
|
|
193
|
-
return (jsx(Portal, { children: jsxs("div", { className: getContainerClass(), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "onpe-modal-content-wrapper", children: [jsx("div", { className: getContentClass(), children: children }), closeButton &&
|
|
198
|
+
return (jsx(Portal, { children: jsxs("div", { className: getContainerClass(), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "onpe-modal-content-wrapper", children: [jsx("div", { className: getContentClass(), children: children }), closeButton && jsx(IconCloseRadius, { onClick: onClose, className: "onpe-modal-close-button", "aria-label": "Cerrar" })] })] }) }));
|
|
194
199
|
};
|
|
195
200
|
|
|
196
201
|
var IconWarning = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "5.040041067761807 0 89.93839835728953 75.564681724846", style: {
|
package/dist/components.js
CHANGED
|
@@ -124,7 +124,7 @@ var Overlay = function (_a) {
|
|
|
124
124
|
return jsx("div", { onClick: onClick, className: "onpe-overlay ".concat(getVisibilityClass(), " ").concat(getColorClass()) });
|
|
125
125
|
};
|
|
126
126
|
|
|
127
|
-
var
|
|
127
|
+
var IconCloseRadius = function (props) { return (jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: 28, height: 28, viewBox: "0 0 28 28", fill: "none" }, props, { children: jsx("path", { d: "M14 0C6.2 0 0 6.2 0 14C0 21.8 6.2 28 14 28C21.8 28 28 21.8 28 14C28 6.2 21.8 0 14 0ZM19.4 21L14 15.6L8.6 21L7 19.4L12.4 14L7 8.6L8.6 7L14 12.4L19.4 7L21 8.6L15.6 14L21 19.4L19.4 21Z", fill: "currentColor" }) }))); };
|
|
128
128
|
|
|
129
129
|
var Modal = function (_a) {
|
|
130
130
|
var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.whitoutBackground, whitoutBackground = _b === void 0 ? false : _b, _c = _a.topAbsolute, topAbsolute = _c === void 0 ? false : _c, _d = _a.closeButton, closeButton = _d === void 0 ? false : _d, _e = _a.closeDisabled, closeDisabled = _e === void 0 ? false : _e, _f = _a.overlayColor, overlayColor = _f === void 0 ? "blue" : _f, props = __rest(_a, ["isOpen", "onClose", "children", "whitoutBackground", "topAbsolute", "closeButton", "closeDisabled", "overlayColor"]);
|
|
@@ -144,37 +144,42 @@ var Modal = function (_a) {
|
|
|
144
144
|
// Resetear scroll del modal cuando se abre
|
|
145
145
|
useEffect(function () {
|
|
146
146
|
if (isOpen) {
|
|
147
|
+
// Función para resetear scroll de cualquier modal content
|
|
148
|
+
var resetModalScroll = function () {
|
|
149
|
+
// Buscar todos los elementos de contenido del modal
|
|
150
|
+
var modalContentElements = document.querySelectorAll(".onpe-modal-content");
|
|
151
|
+
modalContentElements.forEach(function (element) {
|
|
152
|
+
var htmlElement = element;
|
|
153
|
+
// Desactivar animación temporalmente para reset instantáneo
|
|
154
|
+
htmlElement.style.scrollBehavior = "auto";
|
|
155
|
+
htmlElement.scrollTop = 0;
|
|
156
|
+
// Forzar el reset con requestAnimationFrame
|
|
157
|
+
requestAnimationFrame(function () {
|
|
158
|
+
htmlElement.scrollTop = 0;
|
|
159
|
+
// Reactivar animación después del reset
|
|
160
|
+
setTimeout(function () {
|
|
161
|
+
htmlElement.style.scrollBehavior = "smooth";
|
|
162
|
+
}, 10);
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
};
|
|
147
166
|
// Resetear inmediatamente cuando se abre
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
setTimeout(function () {
|
|
155
|
-
modalContentElement_1.style.scrollBehavior = "smooth";
|
|
156
|
-
}, 10);
|
|
157
|
-
}
|
|
158
|
-
// También resetear después de un pequeño delay por si acaso
|
|
159
|
-
setTimeout(function () {
|
|
160
|
-
var modalContentElementDelayed = document.querySelector(".onpe-modal-content.onpe-modal-with-background");
|
|
161
|
-
if (modalContentElementDelayed) {
|
|
162
|
-
modalContentElementDelayed.style.scrollBehavior = "auto";
|
|
163
|
-
modalContentElementDelayed.scrollTop = 0;
|
|
164
|
-
setTimeout(function () {
|
|
165
|
-
modalContentElementDelayed.style.scrollBehavior = "smooth";
|
|
166
|
-
}, 10);
|
|
167
|
-
}
|
|
168
|
-
}, 50);
|
|
167
|
+
resetModalScroll();
|
|
168
|
+
// Resetear múltiples veces para asegurar que funcione
|
|
169
|
+
setTimeout(resetModalScroll, 10);
|
|
170
|
+
setTimeout(resetModalScroll, 50);
|
|
171
|
+
setTimeout(resetModalScroll, 100);
|
|
172
|
+
setTimeout(resetModalScroll, 200);
|
|
169
173
|
}
|
|
170
174
|
else {
|
|
171
175
|
// Resetear scroll cuando se cierra para que no se vea la animación al reabrir
|
|
172
|
-
var
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
176
|
+
var modalContentElements = document.querySelectorAll(".onpe-modal-content");
|
|
177
|
+
modalContentElements.forEach(function (element) {
|
|
178
|
+
var htmlElement = element;
|
|
179
|
+
htmlElement.style.scrollBehavior = "auto";
|
|
180
|
+
htmlElement.scrollTop = 0;
|
|
181
|
+
htmlElement.style.scrollBehavior = "smooth";
|
|
182
|
+
});
|
|
178
183
|
}
|
|
179
184
|
}, [isOpen]);
|
|
180
185
|
var getContainerClass = function () {
|
|
@@ -190,7 +195,7 @@ var Modal = function (_a) {
|
|
|
190
195
|
var customClass = props.className || "";
|
|
191
196
|
return "".concat(baseClass, " ").concat(backgroundClass, " ").concat(customClass).trim();
|
|
192
197
|
};
|
|
193
|
-
return (jsx(Portal, { children: jsxs("div", { className: getContainerClass(), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "onpe-modal-content-wrapper", children: [jsx("div", { className: getContentClass(), children: children }), closeButton &&
|
|
198
|
+
return (jsx(Portal, { children: jsxs("div", { className: getContainerClass(), children: [jsx(Overlay, { show: isOpen, onClick: closeDisabled ? undefined : onClose, color: overlayColor }), jsxs("div", { className: "onpe-modal-content-wrapper", children: [jsx("div", { className: getContentClass(), children: children }), closeButton && jsx(IconCloseRadius, { onClick: onClose, className: "onpe-modal-close-button", "aria-label": "Cerrar" })] })] }) }));
|
|
194
199
|
};
|
|
195
200
|
|
|
196
201
|
var IconWarning = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "5.040041067761807 0 89.93839835728953 75.564681724846", style: {
|