@apolopay-sdk/ui 1.1.0 → 1.2.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/dist/apolopay-sdk.es.js +4577 -0
- package/dist/apolopay-sdk.umd.js +857 -0
- package/dist/components/payment-modal.d.ts +3 -1
- package/dist/payment-button.d.ts +3 -1
- package/dist/types/status.type.d.ts +1 -0
- package/package.json +15 -9
- package/dist/assets/icon_error.js +0 -1
- package/dist/assets/logo_apolo.js +0 -1
- package/dist/components/payment-modal.js +0 -668
- package/dist/components/payment-timer.js +0 -84
- package/dist/components/trigger-button.js +0 -151
- package/dist/index.js +0 -2
- package/dist/payment-button.js +0 -371
- package/dist/styles/modal-base.js +0 -75
- package/dist/styles/qr-base.js +0 -48
- package/dist/styles/shared-styles.js +0 -28
- package/dist/styles/spinner-styles.js +0 -29
- package/dist/styles/text-field-base.js +0 -44
- package/dist/utils/image_error.js +0 -5
package/dist/styles/qr-base.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const qrBaseStyles = css `
|
|
3
|
-
.qr-frame {
|
|
4
|
-
background: white;
|
|
5
|
-
padding: 10px;
|
|
6
|
-
padding-bottom: 14px;
|
|
7
|
-
border-radius: var(--apolo-radius);
|
|
8
|
-
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
|
9
|
-
display: inline-block;
|
|
10
|
-
margin-bottom: 1rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.qr-badge {
|
|
14
|
-
color: var(--apolo-accent);
|
|
15
|
-
font-weight: 700;
|
|
16
|
-
font-size: 1.2rem;
|
|
17
|
-
display: inline-block;
|
|
18
|
-
margin-top: 10px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.qr-wrapper {
|
|
22
|
-
position: relative;
|
|
23
|
-
display: block;
|
|
24
|
-
width: 150px;
|
|
25
|
-
height: 150px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.qr-code-img {
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.qr-overlay-icon {
|
|
34
|
-
position: absolute;
|
|
35
|
-
top: 50%;
|
|
36
|
-
left: 50%;
|
|
37
|
-
transform: translate(-50%, -50%);
|
|
38
|
-
|
|
39
|
-
width: 36px;
|
|
40
|
-
height: 36px;
|
|
41
|
-
|
|
42
|
-
object-fit: contain;
|
|
43
|
-
background-color: white;
|
|
44
|
-
border-radius: 50%;
|
|
45
|
-
padding: 2px;
|
|
46
|
-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const sharedStyles = css `
|
|
3
|
-
:host {
|
|
4
|
-
/* --- API PÚBLICA DE COLORES (THEMING) --- */
|
|
5
|
-
--apolo-primary: var(--payment-button-primary, #0388c0);
|
|
6
|
-
--apolo-primary-darkest: var(--payment-button-primary-darkest, #041c4c);
|
|
7
|
-
--apolo-on-primary: var(--payment-button-on-primary, #ffffff);
|
|
8
|
-
|
|
9
|
-
--apolo-bg: var(--payment-button-bg, #f6f2ec);
|
|
10
|
-
--apolo-text: var(--payment-button-text, #1c315c);
|
|
11
|
-
--apolo-text-muted: var(--payment-button-text-muted, #6b7280);
|
|
12
|
-
--apolo-accent: var(--payment-button-accent, #ea580c);
|
|
13
|
-
--apolo-border: var(--payment-button-border, #e5e7eb);
|
|
14
|
-
|
|
15
|
-
/* --- API PÚBLICA DE FORMA Y TIPOGRAFÍA --- */
|
|
16
|
-
--apolo-radius: var(--payment-button-radius, 12px);
|
|
17
|
-
--apolo-radius-lg: var(--payment-button-radius-lg, 30px);
|
|
18
|
-
--apolo-font: var(--payment-button-font, 'Inter', system-ui, -apple-system, sans-serif);
|
|
19
|
-
--apolo-shadow: var(--payment-button-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
|
|
20
|
-
--apolo-z-index: var(--payment-button-z-index, 9999);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/* Reset global para componentes internos */
|
|
24
|
-
* {
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
font-family: var(--apolo-font);
|
|
27
|
-
}
|
|
28
|
-
`;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const spinnerStyles = css `
|
|
3
|
-
.spinner-overlay {
|
|
4
|
-
position: absolute;
|
|
5
|
-
inset: 0;
|
|
6
|
-
background-color: rgba(255, 255, 255, 0.3);
|
|
7
|
-
z-index: 50;
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
border-radius: var(--apolo-radius, 12px);
|
|
12
|
-
cursor: wait;
|
|
13
|
-
backdrop-filter: blur(2px);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.spinner {
|
|
17
|
-
border: 4px solid #e5e7eb;
|
|
18
|
-
border-top: 4px solid var(--apolo-primary, #6366f1);
|
|
19
|
-
border-radius: 50%;
|
|
20
|
-
width: 40px;
|
|
21
|
-
height: 40px;
|
|
22
|
-
animation: spin 1s linear infinite;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@keyframes spin {
|
|
26
|
-
0% { transform: rotate(0deg); }
|
|
27
|
-
100% { transform: rotate(360deg); }
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const textFieldBaseStyles = css `
|
|
3
|
-
/* Inputs de solo lectura (Diseño Apolo) */
|
|
4
|
-
.text-field {
|
|
5
|
-
display: flex;
|
|
6
|
-
gap: 0.5rem;
|
|
7
|
-
margin-top: 1rem;
|
|
8
|
-
text-align: left;
|
|
9
|
-
position: relative;
|
|
10
|
-
}
|
|
11
|
-
.text-field-label {
|
|
12
|
-
--padding-left: 0.25rem;
|
|
13
|
-
--padding-top: 0.15rem;
|
|
14
|
-
font-size: 0.75rem;
|
|
15
|
-
color: #9ca3af;
|
|
16
|
-
border-radius: calc(var(--apolo-radius) - 1px);
|
|
17
|
-
background: #ffffff;
|
|
18
|
-
padding: var(--padding-top) var(--padding-left);
|
|
19
|
-
position: absolute;
|
|
20
|
-
top: calc(-0.5rem - var(--padding-top));
|
|
21
|
-
left: calc(1rem - var(--padding-left));
|
|
22
|
-
display: block;
|
|
23
|
-
z-index: 2;
|
|
24
|
-
}
|
|
25
|
-
.text-field-input {
|
|
26
|
-
width: 100%;
|
|
27
|
-
padding: 0.75rem 1rem;
|
|
28
|
-
border: 1px solid #526282;
|
|
29
|
-
border-radius: var(--apolo-radius);
|
|
30
|
-
background: #ffffff;
|
|
31
|
-
color: #4b5563;
|
|
32
|
-
font-size: 0.9rem;
|
|
33
|
-
z-index: 1;
|
|
34
|
-
}
|
|
35
|
-
.btn-secondary {
|
|
36
|
-
background-color: #526282;
|
|
37
|
-
color: #ffffff;
|
|
38
|
-
border: none;
|
|
39
|
-
border-radius: var(--apolo-radius);
|
|
40
|
-
padding: 0.5rem 1rem;
|
|
41
|
-
cursor: pointer;
|
|
42
|
-
transition: background-color 0.2s ease;
|
|
43
|
-
}
|
|
44
|
-
`;
|