crmbonus-component-wake 0.0.25 → 0.0.27
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/app-globals-3a1e7e63.js +7 -0
- package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
- package/dist/cjs/app-modal_2.cjs.entry.js +134 -0
- package/dist/cjs/app-modal_2.cjs.entry.js.map +1 -0
- package/dist/cjs/crm-bonus.cjs.entry.js +55 -0
- package/dist/cjs/crm-bonus.cjs.entry.js.map +1 -0
- package/dist/cjs/crmbonus-component-wake.cjs.js +27 -0
- package/dist/cjs/crmbonus-component-wake.cjs.js.map +1 -0
- package/dist/cjs/crmbonus.service-8412ddbf.js +3798 -0
- package/dist/cjs/crmbonus.service-8412ddbf.js.map +1 -0
- package/dist/cjs/giftback-finish_5.cjs.entry.js +155 -0
- package/dist/cjs/giftback-finish_5.cjs.entry.js.map +1 -0
- package/dist/cjs/index-52d8a075.js +1248 -0
- package/dist/cjs/index-52d8a075.js.map +1 -0
- package/dist/cjs/index.cjs.js +11 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +17 -0
- package/dist/cjs/loader.cjs.js.map +1 -0
- package/dist/cjs/loading-spinner.cjs.entry.js +24 -0
- package/dist/cjs/loading-spinner.cjs.entry.js.map +1 -0
- package/dist/cjs/pedido-finalizado.cjs.entry.js +36 -0
- package/dist/cjs/pedido-finalizado.cjs.entry.js.map +1 -0
- package/dist/collection/collection-manifest.json +21 -0
- package/dist/collection/components/crm-bonus/assets/logo.svg +18 -0
- package/dist/collection/components/crm-bonus/assets/success-svgrepo-com.svg +8 -0
- package/dist/collection/components/crm-bonus/assets/svg/logo.svg +18 -0
- package/dist/collection/components/crm-bonus/assets/svg/success-svgrepo-com.svg +8 -0
- package/dist/collection/components/crm-bonus/crm-bonus.css +20 -0
- package/dist/collection/components/crm-bonus/crm-bonus.js +132 -0
- package/dist/collection/components/crm-bonus/crm-bonus.js.map +1 -0
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.css +32 -0
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js +216 -0
- package/dist/collection/components/crm-bonus-form/crm-bonus-form.js.map +1 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.css +10 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.js +20 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-finish/giftback-finish.js.map +1 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.css +74 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js +127 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js.map +1 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.css +109 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js +127 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.js.map +1 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js +75 -0
- package/dist/collection/components/crm-bonus-form/subcomponents/phone/phone.input.js.map +1 -0
- package/dist/collection/components/loading-spinner/loading-spinner.css +17 -0
- package/dist/collection/components/loading-spinner/loading-spinner.js +63 -0
- package/dist/collection/components/loading-spinner/loading-spinner.js.map +1 -0
- package/dist/collection/components/modal/app-modal.css +45 -0
- package/dist/collection/components/modal/app-modal.js +83 -0
- package/dist/collection/components/modal/app-modal.js.map +1 -0
- package/dist/collection/components/pedido/pedido.js +83 -0
- package/dist/collection/components/pedido/pedido.js.map +1 -0
- package/dist/collection/components/phone/phone-input-mask.css +47 -0
- package/dist/collection/components/phone/phone-input-mask.js +90 -0
- package/dist/collection/components/phone/phone-input-mask.js.map +1 -0
- package/dist/collection/contants/index.js +8 -0
- package/dist/collection/contants/index.js.map +1 -0
- package/dist/collection/contants/mocks.js +28 -0
- package/dist/collection/contants/mocks.js.map +1 -0
- package/dist/collection/dto/pin.sent.js +2 -0
- package/dist/collection/dto/pin.sent.js.map +1 -0
- package/dist/collection/dto/update.order.dto.js +2 -0
- package/dist/collection/dto/update.order.dto.js.map +1 -0
- package/dist/collection/dto/validate.pin.bonus.js +2 -0
- package/dist/collection/dto/validate.pin.bonus.js.map +1 -0
- package/dist/collection/index.js +11 -0
- package/dist/collection/index.js.map +1 -0
- package/dist/collection/services/crmbonus.service.js +42 -0
- package/dist/collection/services/crmbonus.service.js.map +1 -0
- package/dist/collection/utils/utils.js +4 -0
- package/dist/collection/utils/utils.js.map +1 -0
- package/dist/components/app-modal.js +8 -0
- package/dist/components/app-modal.js.map +1 -0
- package/dist/components/crm-bonus-form.js +8 -0
- package/dist/components/crm-bonus-form.js.map +1 -0
- package/dist/components/crm-bonus.js +126 -0
- package/dist/components/crm-bonus.js.map +1 -0
- package/dist/components/giftback-finish.js +8 -0
- package/dist/components/giftback-finish.js.map +1 -0
- package/dist/components/giftback-pin.js +8 -0
- package/dist/components/giftback-pin.js.map +1 -0
- package/dist/components/giftback-progress.js +8 -0
- package/dist/components/giftback-progress.js.map +1 -0
- package/dist/components/index.js +9 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/loading-spinner.js +8 -0
- package/dist/components/loading-spinner.js.map +1 -0
- package/dist/{crmbonus-component-wake/crmbonus.service-5208f883.js → components/p-374de9ae.js} +91 -166
- package/dist/components/p-374de9ae.js.map +1 -0
- package/dist/components/p-462c12d8.js +69 -0
- package/dist/components/p-462c12d8.js.map +1 -0
- package/dist/{crmbonus-component-wake/giftback-pin.entry.js → components/p-6442ffce.js} +39 -9
- package/dist/components/p-6442ffce.js.map +1 -0
- package/dist/components/p-878ce0aa.js +174 -0
- package/dist/components/p-878ce0aa.js.map +1 -0
- package/dist/components/p-8fcf8924.js +52 -0
- package/dist/components/p-8fcf8924.js.map +1 -0
- package/dist/components/p-cb5a1fdf.js +39 -0
- package/dist/components/p-cb5a1fdf.js.map +1 -0
- package/dist/components/p-cbade307.js +36 -0
- package/dist/components/p-cbade307.js.map +1 -0
- package/dist/{crmbonus-component-wake/phone-input-mask.entry.js → components/p-e40cf14d.js} +30 -9
- package/dist/components/p-e40cf14d.js.map +1 -0
- package/dist/components/p-e816fb90.js +43 -0
- package/dist/components/p-e816fb90.js.map +1 -0
- package/dist/components/p-faf7103e.js +1064 -0
- package/dist/components/p-faf7103e.js.map +1 -0
- package/dist/components/pedido-finalizado.js +54 -0
- package/dist/components/pedido-finalizado.js.map +1 -0
- package/dist/components/phone-input-mask.js +8 -0
- package/dist/components/phone-input-mask.js.map +1 -0
- package/dist/components/phone-input.js +8 -0
- package/dist/components/phone-input.js.map +1 -0
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +1 -48
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js.map +1 -1
- package/dist/crmbonus-component-wake/index.esm.js +1 -16
- package/dist/crmbonus-component-wake/index.esm.js.map +1 -1
- package/dist/crmbonus-component-wake/p-374de9ae.js +2 -0
- package/dist/crmbonus-component-wake/p-374de9ae.js.map +1 -0
- package/dist/crmbonus-component-wake/p-4306a717.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-4306a717.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/p-72510682.js +3 -0
- package/dist/crmbonus-component-wake/p-72510682.js.map +1 -0
- package/dist/crmbonus-component-wake/p-9985f639.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-9985f639.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/p-be1a56de.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-be1a56de.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/p-e1255160.js +2 -0
- package/dist/crmbonus-component-wake/p-e1255160.js.map +1 -0
- package/dist/crmbonus-component-wake/p-e2f165e8.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-e2f165e8.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/p-f74e4a71.entry.js +2 -0
- package/dist/crmbonus-component-wake/p-f74e4a71.entry.js.map +1 -0
- package/dist/env.js +5 -0
- package/dist/env.js.map +1 -0
- package/dist/{crmbonus-component-wake/crm-bonus-form.entry.js → esm/app-modal_2.entry.js} +26 -6
- package/dist/esm/app-modal_2.entry.js.map +1 -0
- package/dist/{crmbonus-component-wake → esm}/crm-bonus.entry.js +5 -4
- package/dist/esm/crm-bonus.entry.js.map +1 -0
- package/dist/esm/crmbonus-component-wake.js +22 -0
- package/dist/esm/crmbonus-component-wake.js.map +1 -0
- package/dist/esm/crmbonus.service-053a9e38.js +3796 -0
- package/dist/esm/crmbonus.service-053a9e38.js.map +1 -0
- package/dist/esm/giftback-finish_5.entry.js +147 -0
- package/dist/esm/giftback-finish_5.entry.js.map +1 -0
- package/dist/esm/index-9f7bde48.js +1220 -0
- package/dist/esm/index-9f7bde48.js.map +1 -0
- package/dist/esm/index.js +7 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/loader.js +13 -0
- package/dist/esm/loader.js.map +1 -0
- package/dist/{crmbonus-component-wake → esm}/loading-spinner.entry.js +4 -3
- package/dist/esm/loading-spinner.entry.js.map +1 -0
- package/dist/{crmbonus-component-wake → esm}/pedido-finalizado.entry.js +3 -3
- package/dist/esm/pedido-finalizado.entry.js.map +1 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/dist/crmbonus-component-wake/app-modal.entry.js +0 -23
- package/dist/crmbonus-component-wake/app-modal.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/crm-bonus.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/crmbonus.service-5208f883.js.map +0 -1
- package/dist/crmbonus-component-wake/giftback-finish.entry.js +0 -19
- package/dist/crmbonus-component-wake/giftback-finish.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/giftback-pin.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/giftback-progress.entry.js +0 -40
- package/dist/crmbonus-component-wake/giftback-progress.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/index-f557ce7c.js +0 -3039
- package/dist/crmbonus-component-wake/index-f557ce7c.js.map +0 -1
- package/dist/crmbonus-component-wake/loading-spinner.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/pedido-finalizado.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/phone-input.entry.js +0 -21
- package/dist/crmbonus-component-wake/phone-input.entry.js.map +0 -1
- package/dist/crmbonus-component-wake/shadow-css-7ad5caf8.js +0 -334
- package/dist/crmbonus-component-wake/shadow-css-7ad5caf8.js.map +0 -1
- /package/dist/{crmbonus-component-wake → esm}/app-globals-0f993ce5.js +0 -0
- /package/dist/{crmbonus-component-wake → esm}/app-globals-0f993ce5.js.map +0 -0
@@ -0,0 +1,127 @@
|
|
1
|
+
import { h } from "@stencil/core";
|
2
|
+
export class GiftbackPin {
|
3
|
+
constructor() {
|
4
|
+
this.sent = undefined;
|
5
|
+
this.validate = undefined;
|
6
|
+
this.cancel = undefined;
|
7
|
+
this.pin = ['', '', '', ''];
|
8
|
+
this.isVerified = false;
|
9
|
+
this.loading = false;
|
10
|
+
}
|
11
|
+
handleInput(event, index) {
|
12
|
+
const input = event.target;
|
13
|
+
const value = input.value.slice(0, 1); // Limitar a um único dígito
|
14
|
+
this.pin[index] = value;
|
15
|
+
// Focar no próximo campo, se possível
|
16
|
+
if (value && index < this.pin.length - 1) {
|
17
|
+
const nextInput = input.nextElementSibling;
|
18
|
+
nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
|
19
|
+
}
|
20
|
+
this.pin = [...this.pin];
|
21
|
+
}
|
22
|
+
validatePin() {
|
23
|
+
console.log('this.pin', this.pin);
|
24
|
+
this.validate(this.pin.join(""));
|
25
|
+
}
|
26
|
+
verifyPin() {
|
27
|
+
const pinCode = this.pin.join('');
|
28
|
+
if (pinCode === '9999') {
|
29
|
+
this.isVerified = true;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
render() {
|
33
|
+
return (h("div", { key: '7fe6a9f55ca436ecfcc20f106c1efeddd8387490', class: "form-container-pin" }, h("div", { key: 'aece84fab5ecf94ce5ca90fd1912623dd3c1b9b8' }, h("p", { key: '5134dd8eb3478f59dcfcdca6612e885b76578cba' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: '8855be06a09925746a5b18323726dd67ec73d7c3', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) }))))), h("div", { key: '1c5523feb6c9dafbfddd5388170de5fea7627f62', class: "footer-button" }, h("button", { key: '8506cd68998d4ecb76f8a8a262373605a06827de', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: '4dda0af894ad5849ba27d3a4f6c15c80d6c984ae', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePin() }, !this.loading ? "Enviar" : h("loading-spinner", { size: "15px", color: "#fff" })))));
|
34
|
+
}
|
35
|
+
static get is() { return "giftback-pin"; }
|
36
|
+
static get encapsulation() { return "shadow"; }
|
37
|
+
static get originalStyleUrls() {
|
38
|
+
return {
|
39
|
+
"$": ["giftback-pin.css"]
|
40
|
+
};
|
41
|
+
}
|
42
|
+
static get styleUrls() {
|
43
|
+
return {
|
44
|
+
"$": ["giftback-pin.css"]
|
45
|
+
};
|
46
|
+
}
|
47
|
+
static get properties() {
|
48
|
+
return {
|
49
|
+
"sent": {
|
50
|
+
"type": "unknown",
|
51
|
+
"mutable": false,
|
52
|
+
"complexType": {
|
53
|
+
"original": "IPinSent",
|
54
|
+
"resolved": "IPinSent",
|
55
|
+
"references": {
|
56
|
+
"IPinSent": {
|
57
|
+
"location": "import",
|
58
|
+
"path": "../../../../dto/pin.sent",
|
59
|
+
"id": "src/dto/pin.sent.ts::IPinSent"
|
60
|
+
}
|
61
|
+
}
|
62
|
+
},
|
63
|
+
"required": false,
|
64
|
+
"optional": false,
|
65
|
+
"docs": {
|
66
|
+
"tags": [],
|
67
|
+
"text": ""
|
68
|
+
}
|
69
|
+
},
|
70
|
+
"validate": {
|
71
|
+
"type": "unknown",
|
72
|
+
"mutable": false,
|
73
|
+
"complexType": {
|
74
|
+
"original": "(pin: string) => void",
|
75
|
+
"resolved": "(pin: string) => void",
|
76
|
+
"references": {}
|
77
|
+
},
|
78
|
+
"required": false,
|
79
|
+
"optional": false,
|
80
|
+
"docs": {
|
81
|
+
"tags": [],
|
82
|
+
"text": ""
|
83
|
+
}
|
84
|
+
},
|
85
|
+
"cancel": {
|
86
|
+
"type": "unknown",
|
87
|
+
"mutable": false,
|
88
|
+
"complexType": {
|
89
|
+
"original": "() => void",
|
90
|
+
"resolved": "() => void",
|
91
|
+
"references": {}
|
92
|
+
},
|
93
|
+
"required": false,
|
94
|
+
"optional": false,
|
95
|
+
"docs": {
|
96
|
+
"tags": [],
|
97
|
+
"text": ""
|
98
|
+
}
|
99
|
+
},
|
100
|
+
"loading": {
|
101
|
+
"type": "boolean",
|
102
|
+
"mutable": false,
|
103
|
+
"complexType": {
|
104
|
+
"original": "boolean",
|
105
|
+
"resolved": "boolean",
|
106
|
+
"references": {}
|
107
|
+
},
|
108
|
+
"required": false,
|
109
|
+
"optional": false,
|
110
|
+
"docs": {
|
111
|
+
"tags": [],
|
112
|
+
"text": ""
|
113
|
+
},
|
114
|
+
"attribute": "loading",
|
115
|
+
"reflect": false,
|
116
|
+
"defaultValue": "false"
|
117
|
+
}
|
118
|
+
};
|
119
|
+
}
|
120
|
+
static get states() {
|
121
|
+
return {
|
122
|
+
"pin": {},
|
123
|
+
"isVerified": {}
|
124
|
+
};
|
125
|
+
}
|
126
|
+
}
|
127
|
+
//# sourceMappingURL=giftback-pin.js.map
|
package/dist/collection/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"giftback-pin.js","sourceRoot":"","sources":["../../../../../../src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ1D,MAAM,OAAO,WAAW;;;;;mBAMK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;0BACV,KAAK;uBAET,KAAK;;IAEhC,WAAW,CAAC,KAAY,EAAE,KAAa;QACnC,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,4BAA4B;QACnE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QAExB,sCAAsC;QACtC,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvC,MAAM,SAAS,GAAG,KAAK,CAAC,kBAAsC,CAAC;YAC/D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAED,WAAW;QACP,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;IACpC,CAAC;IAED,SAAS;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAC3B,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,oBAAoB;YAC3B;gBACI,8GAAiD;gBACjD,4DAAK,KAAK,EAAC,eAAe,IACrB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,aACI,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EACtB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,GACpD,CACL,CAAC,CACA,CACJ;YAEN,4DAAK,KAAK,EAAC,eAAe;gBACtB,+DAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,eAEzE;gBACT,+DAAQ,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,IAE7G,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEtE,CACP,CAGJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { IPinSent } from '../../../../dto/pin.sent';\n\n@Component({\n tag: 'giftback-pin',\n styleUrl: 'giftback-pin.css',\n shadow: true,\n})\nexport class GiftbackPin {\n\n @Prop() sent: IPinSent;\n @Prop() validate: (pin: string) => void;\n @Prop() cancel: () => void;\n\n @State() pin: string[] = ['', '', '', ''];\n @State() isVerified: boolean = false;\n\n @Prop() loading: boolean = false;\n\n handleInput(event: Event, index: number) {\n const input = event.target as HTMLInputElement;\n const value = input.value.slice(0, 1); // Limitar a um único dígito\n this.pin[index] = value;\n\n // Focar no próximo campo, se possível\n if (value && index < this.pin.length - 1) {\n const nextInput = input.nextElementSibling as HTMLInputElement;\n nextInput?.focus();\n }\n\n this.pin = [...this.pin];\n }\n\n validatePin() {\n console.log('this.pin', this.pin);\n this.validate(this.pin.join(\"\"))\n }\n\n verifyPin() {\n const pinCode = this.pin.join('');\n if (pinCode === '9999') {\n this.isVerified = true;\n }\n }\n\n render() {\n return (\n <div class=\"form-container-pin\">\n <div >\n <p>Insira o PIN de 4 dígitos enviado por SMS.</p>\n <div class=\"pin-container\">\n {this.pin.map((_, index) => (\n <input\n type=\"text\"\n maxLength={1}\n value={this.pin[index]}\n onInput={(event) => this.handleInput(event, index)}\n />\n ))}\n </div>\n </div>\n\n <div class=\"footer-button\">\n <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()}>\n Cancelar\n </button>\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePin()}>\n {\n !this.loading ? \"Enviar\" : <loading-spinner size=\"15px\" color=\"#fff\" />\n }\n </button>\n </div>\n {/* <button onClick={() => this.verifyPin()}>Enviar</button>\n {this.isVerified && <p class=\"success\">Código verificado com sucesso!</p>} */}\n </div>\n );\n }\n}\n"]}
|
@@ -0,0 +1,109 @@
|
|
1
|
+
:host {
|
2
|
+
display: flex;
|
3
|
+
font-family: Arial, sans-serif;
|
4
|
+
/* background-color: #f8f4eb; */
|
5
|
+
border-radius: 10px;
|
6
|
+
padding: 16px;
|
7
|
+
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
|
8
|
+
max-width: 100%;
|
9
|
+
flex-direction: column;
|
10
|
+
}
|
11
|
+
|
12
|
+
.giftback-container {
|
13
|
+
display: flex;
|
14
|
+
flex-direction: column;
|
15
|
+
}
|
16
|
+
|
17
|
+
.giftback-container p {
|
18
|
+
font-size: medium;
|
19
|
+
}
|
20
|
+
|
21
|
+
h3 {
|
22
|
+
margin: 0 0 10px;
|
23
|
+
font-size: 18px;
|
24
|
+
}
|
25
|
+
|
26
|
+
p {
|
27
|
+
margin: 5px 0;
|
28
|
+
font-size: 14px;
|
29
|
+
align-self: start;
|
30
|
+
}
|
31
|
+
|
32
|
+
.validity {
|
33
|
+
font-size: 12px;
|
34
|
+
color: #888;
|
35
|
+
}
|
36
|
+
|
37
|
+
.progress-container {
|
38
|
+
display: flex;
|
39
|
+
align-items: center;
|
40
|
+
margin: 10px 0;
|
41
|
+
}
|
42
|
+
|
43
|
+
progress-container span {
|
44
|
+
font-size: 12px;
|
45
|
+
color: #666;
|
46
|
+
}
|
47
|
+
|
48
|
+
input[type='range'] {
|
49
|
+
flex: 1;
|
50
|
+
margin: 0 10px;
|
51
|
+
appearance: none;
|
52
|
+
background-color: #ccc;
|
53
|
+
height: 6px;
|
54
|
+
border-radius: 3px;
|
55
|
+
outline: none;
|
56
|
+
cursor: pointer;
|
57
|
+
}
|
58
|
+
|
59
|
+
input[type='range']::-webkit-slider-thumb {
|
60
|
+
appearance: none;
|
61
|
+
width: 14px;
|
62
|
+
height: 14px;
|
63
|
+
border-radius: 50%;
|
64
|
+
background-color: #555;
|
65
|
+
cursor: pointer;
|
66
|
+
}
|
67
|
+
|
68
|
+
.remaining {
|
69
|
+
font-weight: bold;
|
70
|
+
font-size: 14px;
|
71
|
+
color: #333;
|
72
|
+
}
|
73
|
+
|
74
|
+
.button {
|
75
|
+
top: 50%;
|
76
|
+
background-color: #6c6c7e;
|
77
|
+
color: #fff;
|
78
|
+
border: none;
|
79
|
+
border-radius: 10px;
|
80
|
+
padding: 10px;
|
81
|
+
min-height: 30px;
|
82
|
+
min-width: 120px;
|
83
|
+
font-size: 19px;
|
84
|
+
cursor: pointer;
|
85
|
+
}
|
86
|
+
|
87
|
+
.button-cancel {
|
88
|
+
top: 50%;
|
89
|
+
background-color: #ffffff;
|
90
|
+
color: #1e1c1c;
|
91
|
+
border: 1px solid gray;
|
92
|
+
border-radius: 10px;
|
93
|
+
padding: 10px;
|
94
|
+
min-height: 30px;
|
95
|
+
min-width: 120px;
|
96
|
+
font-size: 19px;
|
97
|
+
cursor: pointer;
|
98
|
+
}
|
99
|
+
|
100
|
+
.disabled {
|
101
|
+
opacity: 0.6;
|
102
|
+
cursor: not-allowed;
|
103
|
+
}
|
104
|
+
|
105
|
+
.footer-button-giftback {
|
106
|
+
display: flex;
|
107
|
+
justify-content: space-between;
|
108
|
+
margin-top: 14px;
|
109
|
+
}
|
@@ -0,0 +1,127 @@
|
|
1
|
+
import { h } from "@stencil/core";
|
2
|
+
export class GiftbackProgress {
|
3
|
+
constructor() {
|
4
|
+
this.usedValue = 0;
|
5
|
+
this.loading = false;
|
6
|
+
this.bonus = {
|
7
|
+
totalBonus: 0,
|
8
|
+
cartId: "",
|
9
|
+
minimumPurchase: 0,
|
10
|
+
bonusBalance: 0,
|
11
|
+
calculatedValue: 0,
|
12
|
+
firstValidityDate: ""
|
13
|
+
};
|
14
|
+
this.reserve = undefined;
|
15
|
+
this.cancel = undefined;
|
16
|
+
}
|
17
|
+
componentWillLoad() {
|
18
|
+
this.usedValue = parseFloat(this.bonus.bonusBalance.toString());
|
19
|
+
}
|
20
|
+
handleSliderChange(event) {
|
21
|
+
const input = event.target;
|
22
|
+
this.usedValue = parseFloat(input.value);
|
23
|
+
}
|
24
|
+
async handleReserve() {
|
25
|
+
this.reserve(this.usedValue);
|
26
|
+
}
|
27
|
+
render() {
|
28
|
+
const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;
|
29
|
+
return (h("div", { key: '0949784aa871d4e5a1e3fd5e68f24abd92f9b4f9', class: "giftback-container" }, h("p", { key: '129a7c66ec49abe6d1cf2e93ad8be39030807ce0' }, "Voc\u00EA possui at\u00E9 ", h("strong", { key: '4872e8b42cc25c9339004f5fa7518a269894cc04' }, "R$ ", this.bonus.totalBonus.toFixed(2)), " de Giftback nessa compra!"), h("p", { key: 'd47e314d9f597a2a44a43d353f76f4382e77657d', class: "validity" }, "V\u00E1lido at\u00E9: ", new Date(this.bonus.firstValidityDate).toLocaleDateString('pt-Br')), h("p", { key: '8f3cb7e066eacf5073c5154c3c418fad05b66b67' }, "Voc\u00EA est\u00E1 utilizando ", h("strong", { key: 'aff6a1a0c1be96396640d35cb1429f8e2ece2f1e' }, "R$ ", this.usedValue.toFixed(2)), " nessa compra"), h("div", { key: 'ab8b39df640a1ad036209410cbcda37caf8b6825', class: "progress-container" }, h("span", { key: 'adc4ee7e73575394b2e19e70440cc86474033011' }, "R$ 0"), h("input", { key: '2b80b3ac24e278e002c68fa25449416791e36b9c', disabled: true, type: "range", min: "0", step: "0.01", max: this.bonus.totalBonus, value: this.usedValue, onInput: (event) => this.handleSliderChange(event) }), h("span", { key: '74453f038dcac7a8755edfc9d13f5b0908f5f484' }, "R$ ", this.bonus.totalBonus.toFixed(2))), h("p", { key: 'c48bc53e9eb4213ddc2580c968b9f170a6805b9c', class: "remaining" }, "Faltam ", h("strong", { key: 'd0e91b9121c82ff8051910180496503581f6e498' }, "R$ ", remainingGiftback > 0 ? remainingGiftback.toFixed(2) : Number(0).toFixed(2)), " para utilizar o valor total do Giftback."), h("div", { key: 'd87e4ade049fc1ad8cc4094ab4d1482edea2d9f7', class: "footer-button-giftback" }, h("button", { key: '49ed40adb615dfedcf97ca369d82275e1037b078', class: "button-cancel", disabled: this.loading, onClick: () => this.cancel() }, "Cancelar"), h("button", { key: '5cba6462515c0b9995660bd5974da88b2c90bdda', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.handleReserve() }, !this.loading ? "Aplicar" : h("loading-spinner", { size: "10px", color: "#fff" })))));
|
30
|
+
}
|
31
|
+
static get is() { return "giftback-progress"; }
|
32
|
+
static get encapsulation() { return "shadow"; }
|
33
|
+
static get originalStyleUrls() {
|
34
|
+
return {
|
35
|
+
"$": ["giftback-progress.css"]
|
36
|
+
};
|
37
|
+
}
|
38
|
+
static get styleUrls() {
|
39
|
+
return {
|
40
|
+
"$": ["giftback-progress.css"]
|
41
|
+
};
|
42
|
+
}
|
43
|
+
static get properties() {
|
44
|
+
return {
|
45
|
+
"loading": {
|
46
|
+
"type": "boolean",
|
47
|
+
"mutable": false,
|
48
|
+
"complexType": {
|
49
|
+
"original": "boolean",
|
50
|
+
"resolved": "boolean",
|
51
|
+
"references": {}
|
52
|
+
},
|
53
|
+
"required": false,
|
54
|
+
"optional": false,
|
55
|
+
"docs": {
|
56
|
+
"tags": [],
|
57
|
+
"text": ""
|
58
|
+
},
|
59
|
+
"attribute": "loading",
|
60
|
+
"reflect": false,
|
61
|
+
"defaultValue": "false"
|
62
|
+
},
|
63
|
+
"bonus": {
|
64
|
+
"type": "unknown",
|
65
|
+
"mutable": false,
|
66
|
+
"complexType": {
|
67
|
+
"original": "Partial<IBonus>",
|
68
|
+
"resolved": "{ hasBonus?: boolean; bonusBalance?: number; totalBonus?: number; minimumPurchase?: number; bonusIds?: string; firstValidityDate?: string; history?: [{ validityStart: string; validityEnd: string; value: number; }, { validityStart: string; validityEnd: string; value: number; }]; storeId?: number; userId?: number; cartId?: string; calculatedValue?: number; totalValue?: number; }",
|
69
|
+
"references": {
|
70
|
+
"Partial": {
|
71
|
+
"location": "global",
|
72
|
+
"id": "global::Partial"
|
73
|
+
},
|
74
|
+
"IBonus": {
|
75
|
+
"location": "import",
|
76
|
+
"path": "../../../../dto/validate.pin.bonus",
|
77
|
+
"id": "src/dto/validate.pin.bonus.ts::IBonus"
|
78
|
+
}
|
79
|
+
}
|
80
|
+
},
|
81
|
+
"required": false,
|
82
|
+
"optional": false,
|
83
|
+
"docs": {
|
84
|
+
"tags": [],
|
85
|
+
"text": ""
|
86
|
+
},
|
87
|
+
"defaultValue": "{\n totalBonus: 0,\n cartId: \"\",\n minimumPurchase: 0,\n bonusBalance: 0,\n calculatedValue: 0,\n firstValidityDate: \"\"\n }"
|
88
|
+
},
|
89
|
+
"reserve": {
|
90
|
+
"type": "unknown",
|
91
|
+
"mutable": false,
|
92
|
+
"complexType": {
|
93
|
+
"original": "(amountRedeemed: number) => void",
|
94
|
+
"resolved": "(amountRedeemed: number) => void",
|
95
|
+
"references": {}
|
96
|
+
},
|
97
|
+
"required": false,
|
98
|
+
"optional": false,
|
99
|
+
"docs": {
|
100
|
+
"tags": [],
|
101
|
+
"text": ""
|
102
|
+
}
|
103
|
+
},
|
104
|
+
"cancel": {
|
105
|
+
"type": "unknown",
|
106
|
+
"mutable": false,
|
107
|
+
"complexType": {
|
108
|
+
"original": "() => void",
|
109
|
+
"resolved": "() => void",
|
110
|
+
"references": {}
|
111
|
+
},
|
112
|
+
"required": false,
|
113
|
+
"optional": false,
|
114
|
+
"docs": {
|
115
|
+
"tags": [],
|
116
|
+
"text": ""
|
117
|
+
}
|
118
|
+
}
|
119
|
+
};
|
120
|
+
}
|
121
|
+
static get states() {
|
122
|
+
return {
|
123
|
+
"usedValue": {}
|
124
|
+
};
|
125
|
+
}
|
126
|
+
}
|
127
|
+
//# sourceMappingURL=giftback-progress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"giftback-progress.js","sourceRoot":"","sources":["../../../../../../src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\nimport { IBonus } from '../../../../dto/validate.pin.bonus';\n\n@Component({\n tag: 'giftback-progress',\n styleUrl: 'giftback-progress.css',\n shadow: true,\n})\nexport class GiftbackProgress {\n @State() usedValue: number = 0;\n\n @Prop() loading: boolean = false;\n\n @Prop() bonus: Partial<IBonus> = {\n totalBonus: 0,\n cartId: \"\",\n minimumPurchase: 0,\n bonusBalance: 0,\n calculatedValue: 0,\n firstValidityDate: \"\"\n };\n\n @Prop() reserve: (amountRedeemed: number) => void;\n @Prop() cancel: () => void;\n\n componentWillLoad() {\n this.usedValue = parseFloat(this.bonus.bonusBalance.toString());\n }\n\n handleSliderChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.usedValue = parseFloat(input.value);\n }\n\n async handleReserve() {\n this.reserve(this.usedValue);\n }\n\n render() {\n const remainingGiftback = this.bonus.minimumPurchase - this.bonus.totalValue;\n\n return (\n <div class=\"giftback-container\">\n <p>\n Você possui até <strong>R$ {this.bonus.totalBonus.toFixed(2)}</strong> de Giftback nessa compra!\n </p>\n <p class=\"validity\">Válido até: {new Date(this.bonus.firstValidityDate).toLocaleDateString('pt-Br')}</p>\n\n <p>Você está utilizando <strong>R$ {this.usedValue.toFixed(2)}</strong> nessa compra</p>\n\n <div class=\"progress-container\">\n <span>R$ 0</span>\n <input\n disabled\n type=\"range\"\n min=\"0\"\n step=\"0.01\"\n max={this.bonus.totalBonus}\n value={this.usedValue}\n onInput={(event) => this.handleSliderChange(event)}\n />\n <span>R$ {this.bonus.totalBonus.toFixed(2)}</span>\n </div>\n\n <p class=\"remaining\">\n Faltam <strong>R$ {remainingGiftback > 0 ? remainingGiftback.toFixed(2) : Number(0).toFixed(2)}</strong> para utilizar o valor total do Giftback.\n </p>\n\n <div class=\"footer-button-giftback\">\n\n <button class=\"button-cancel\" disabled={this.loading} onClick={() => this.cancel()}>\n Cancelar\n </button>\n\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.handleReserve()}>\n {\n !this.loading ? \"Aplicar\" : <loading-spinner size=\"10px\" color=\"#fff\" />\n }\n </button>\n </div>\n </div>\n );\n }\n}\n"]}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
import { h } from "@stencil/core";
|
2
|
+
export class PhoneInput {
|
3
|
+
constructor() {
|
4
|
+
this.sendPin = undefined;
|
5
|
+
this.loading = undefined;
|
6
|
+
this.value = undefined;
|
7
|
+
}
|
8
|
+
async validatePhone() {
|
9
|
+
const phone = await this.phoneInputMask.getPhone();
|
10
|
+
await this.sendPin(phone);
|
11
|
+
}
|
12
|
+
render() {
|
13
|
+
return (h("div", { key: '8deb65295383b9a14e1ac5c3050ce2cab709c208', class: "form-container" }, h("phone-input-mask", { key: 'd5c9b2fb84b166c67fdfa653f4d0194818d7ae54', initialValue: this.value, ref: ref => this.phoneInputMask = ref }), h("button", { key: '666403560be459bd387d743936b4de1d0cb29ade', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => this.validatePhone() }, !this.loading ? "validar" : h("loading-spinner", { size: "25px", color: "#fff" }))));
|
14
|
+
}
|
15
|
+
static get is() { return "phone-input"; }
|
16
|
+
static get properties() {
|
17
|
+
return {
|
18
|
+
"sendPin": {
|
19
|
+
"type": "unknown",
|
20
|
+
"mutable": false,
|
21
|
+
"complexType": {
|
22
|
+
"original": "Function",
|
23
|
+
"resolved": "Function",
|
24
|
+
"references": {
|
25
|
+
"Function": {
|
26
|
+
"location": "global",
|
27
|
+
"id": "global::Function"
|
28
|
+
}
|
29
|
+
}
|
30
|
+
},
|
31
|
+
"required": false,
|
32
|
+
"optional": false,
|
33
|
+
"docs": {
|
34
|
+
"tags": [],
|
35
|
+
"text": ""
|
36
|
+
}
|
37
|
+
},
|
38
|
+
"loading": {
|
39
|
+
"type": "boolean",
|
40
|
+
"mutable": false,
|
41
|
+
"complexType": {
|
42
|
+
"original": "boolean",
|
43
|
+
"resolved": "boolean",
|
44
|
+
"references": {}
|
45
|
+
},
|
46
|
+
"required": false,
|
47
|
+
"optional": false,
|
48
|
+
"docs": {
|
49
|
+
"tags": [],
|
50
|
+
"text": ""
|
51
|
+
},
|
52
|
+
"attribute": "loading",
|
53
|
+
"reflect": false
|
54
|
+
},
|
55
|
+
"value": {
|
56
|
+
"type": "string",
|
57
|
+
"mutable": false,
|
58
|
+
"complexType": {
|
59
|
+
"original": "string",
|
60
|
+
"resolved": "string",
|
61
|
+
"references": {}
|
62
|
+
},
|
63
|
+
"required": false,
|
64
|
+
"optional": false,
|
65
|
+
"docs": {
|
66
|
+
"tags": [],
|
67
|
+
"text": ""
|
68
|
+
},
|
69
|
+
"attribute": "value",
|
70
|
+
"reflect": false
|
71
|
+
}
|
72
|
+
};
|
73
|
+
}
|
74
|
+
}
|
75
|
+
//# sourceMappingURL=phone.input.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"phone.input.js","sourceRoot":"","sources":["../../../../../../src/components/crm-bonus-form/subcomponents/phone/phone.input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKnD,MAAM,OAAO,UAAU;;;;;;IAQnB,KAAK,CAAC,aAAa;QACf,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;QACnD,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,gBAAgB;YACvB,yEAAkB,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,GAAI;YACrF,+DAAQ,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAE/G,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAiB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,CAEvE,CACP,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: 'phone-input'\n})\nexport class PhoneInput {\n\n private phoneInputMask: HTMLPhoneInputMaskElement;\n\n @Prop() sendPin: Function;\n @Prop() loading: boolean;\n @Prop() value: string;\n\n async validatePhone() {\n const phone = await this.phoneInputMask.getPhone();\n await this.sendPin(phone);\n }\n\n render() {\n return (\n <div class=\"form-container\">\n <phone-input-mask initialValue={this.value} ref={ref => this.phoneInputMask = ref} />\n <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => this.validatePhone()}>\n {\n !this.loading ? \"validar\" : <loading-spinner size=\"25px\" color=\"#fff\" />\n }\n </button>\n </div>\n )\n }\n}"]}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
.spinner {
|
2
|
+
display: inline-block;
|
3
|
+
border: 4px solid transparent;
|
4
|
+
border-radius: 50%;
|
5
|
+
border-top-color: var(--color, #0078d7);
|
6
|
+
animation: spin 1s linear infinite;
|
7
|
+
}
|
8
|
+
|
9
|
+
@keyframes spin {
|
10
|
+
0% {
|
11
|
+
transform: rotate(0deg);
|
12
|
+
}
|
13
|
+
|
14
|
+
100% {
|
15
|
+
transform: rotate(360deg);
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import { h } from "@stencil/core";
|
2
|
+
export class LoadingSpinner {
|
3
|
+
constructor() {
|
4
|
+
this.size = '50px';
|
5
|
+
this.color = '#0078d7';
|
6
|
+
}
|
7
|
+
render() {
|
8
|
+
return (h("div", { key: 'cba1c6d6635d5f9ca12dd86c1d293126ffc54167', class: "spinner", style: { width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` } }));
|
9
|
+
}
|
10
|
+
static get is() { return "loading-spinner"; }
|
11
|
+
static get encapsulation() { return "shadow"; }
|
12
|
+
static get originalStyleUrls() {
|
13
|
+
return {
|
14
|
+
"$": ["loading-spinner.css"]
|
15
|
+
};
|
16
|
+
}
|
17
|
+
static get styleUrls() {
|
18
|
+
return {
|
19
|
+
"$": ["loading-spinner.css"]
|
20
|
+
};
|
21
|
+
}
|
22
|
+
static get properties() {
|
23
|
+
return {
|
24
|
+
"size": {
|
25
|
+
"type": "string",
|
26
|
+
"mutable": false,
|
27
|
+
"complexType": {
|
28
|
+
"original": "string",
|
29
|
+
"resolved": "string",
|
30
|
+
"references": {}
|
31
|
+
},
|
32
|
+
"required": false,
|
33
|
+
"optional": false,
|
34
|
+
"docs": {
|
35
|
+
"tags": [],
|
36
|
+
"text": ""
|
37
|
+
},
|
38
|
+
"attribute": "size",
|
39
|
+
"reflect": false,
|
40
|
+
"defaultValue": "'50px'"
|
41
|
+
},
|
42
|
+
"color": {
|
43
|
+
"type": "string",
|
44
|
+
"mutable": false,
|
45
|
+
"complexType": {
|
46
|
+
"original": "string",
|
47
|
+
"resolved": "string",
|
48
|
+
"references": {}
|
49
|
+
},
|
50
|
+
"required": false,
|
51
|
+
"optional": false,
|
52
|
+
"docs": {
|
53
|
+
"tags": [],
|
54
|
+
"text": ""
|
55
|
+
},
|
56
|
+
"attribute": "color",
|
57
|
+
"reflect": false,
|
58
|
+
"defaultValue": "'#0078d7'"
|
59
|
+
}
|
60
|
+
};
|
61
|
+
}
|
62
|
+
}
|
63
|
+
//# sourceMappingURL=loading-spinner.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"loading-spinner.js","sourceRoot":"","sources":["../../../../src/components/loading-spinner/loading-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,cAAc;;oBACA,MAAM;qBACL,SAAS;;IAEjC,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,sCAAsC,EAAE,GAAQ,CAChJ,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'loading-spinner',\n styleUrl: 'loading-spinner.css',\n shadow: true,\n})\nexport class LoadingSpinner {\n @Prop() size: string = '50px'; // Tamanho do spinner (padrão 50px)\n @Prop() color: string = '#0078d7'; // Cor do spinner (padrão azul)\n\n render() {\n return (\n <div class=\"spinner\" style={{ width: this.size, height: this.size, borderColor: `${this.color} transparent transparent transparent` }}></div>\n );\n }\n}\n"]}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
.modal-backdrop {
|
2
|
+
position: fixed;
|
3
|
+
top: 0;
|
4
|
+
left: 0;
|
5
|
+
width: 100%;
|
6
|
+
height: 100%;
|
7
|
+
background-color: rgba(0, 0, 0, 0.5);
|
8
|
+
display: none;
|
9
|
+
justify-content: center;
|
10
|
+
align-items: center;
|
11
|
+
z-index: 1000;
|
12
|
+
}
|
13
|
+
|
14
|
+
.modal-backdrop.visible {
|
15
|
+
display: flex;
|
16
|
+
}
|
17
|
+
|
18
|
+
.modal {
|
19
|
+
background: white;
|
20
|
+
border-radius: 8px;
|
21
|
+
padding: 1rem;
|
22
|
+
max-width: 500px;
|
23
|
+
width: 90%;
|
24
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
25
|
+
}
|
26
|
+
|
27
|
+
.modal-header {
|
28
|
+
display: flex;
|
29
|
+
justify-content: space-between;
|
30
|
+
align-items: center;
|
31
|
+
border-bottom: 1px solid #ddd;
|
32
|
+
margin-bottom: 1rem;
|
33
|
+
}
|
34
|
+
|
35
|
+
.close-button {
|
36
|
+
background: none;
|
37
|
+
border: none;
|
38
|
+
font-size: 1.5rem;
|
39
|
+
cursor: pointer;
|
40
|
+
}
|
41
|
+
|
42
|
+
.modal-body {
|
43
|
+
/* padding: 1rem 0; */
|
44
|
+
}
|
45
|
+
|