crmbonus-component-wake 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/giftback-pin.d.ts +11 -0
- package/dist/components/giftback-progress.d.ts +11 -0
- package/dist/components/phone-input.d.ts +11 -0
- package/dist/crmbonus-component-wake/app-modal.entry.js +2 -2
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js +3865 -6
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/crm-bonus.entry.js +3 -3
- package/dist/crmbonus-component-wake/crm-bonus.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +3 -3
- package/dist/crmbonus-component-wake/giftback-pin.entry.js +38 -0
- package/dist/crmbonus-component-wake/giftback-pin.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/giftback-progress.entry.js +26 -0
- package/dist/crmbonus-component-wake/giftback-progress.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/index-71c2c4ae.js +3039 -0
- package/dist/crmbonus-component-wake/index-71c2c4ae.js.map +1 -0
- package/dist/crmbonus-component-wake/{index-f4f9c8f2.js → index-eeb8f9f2.js} +2 -2
- package/dist/crmbonus-component-wake/index-eeb8f9f2.js.map +1 -0
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js +2 -2
- package/dist/crmbonus-component-wake/phone-input.entry.js +20 -0
- package/dist/crmbonus-component-wake/phone-input.entry.js.map +1 -0
- package/dist/types/components/crm-bonus/crm-bonus.d.ts +1 -0
- package/dist/types/components/crm-bonus-form/crm-bonus-form.d.ts +9 -2
- package/dist/types/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.d.ts +10 -0
- package/dist/types/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.d.ts +8 -0
- package/dist/types/components/crm-bonus-form/subcomponents/phone/phone.input.d.ts +7 -0
- package/dist/types/components.d.ts +57 -0
- package/dist/types/dto/pin.sent.d.ts +4 -0
- package/dist/types/dto/validate.pin.bonus.d.ts +13 -0
- package/dist/types/home/darlison/Projects/crmbonus/crmbonus-component-wake/.stencil/env.d.ts +4 -0
- package/dist/types/services/crmbonus.service.d.ts +6 -0
- package/package.json +5 -2
- package/dist/crmbonus-component-wake/index-f4f9c8f2.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"crm-bonus.entry.esm.js","mappings":";;AAAA,MAAM,OAAO,GAAG,w9JAAw9J;;ACAx+J,MAAM,WAAW,GAAG,mDAAmD;;MCS1D,WAAW;;;yBACQ,KAAK
|
|
1
|
+
{"file":"crm-bonus.entry.esm.js","mappings":";;AAAA,MAAM,OAAO,GAAG,w9JAAw9J;;ACAx+J,MAAM,WAAW,GAAG,mDAAmD;;MCS1D,WAAW;;;yBACQ,KAAK;;;;IAInC,MAAM;QAEJ,QACE,8DACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,GAAG,EAAEA,OAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAI,CACtD,EACN,kEACE,MAAM,EAAE,IAAI,CAAC,SAAS,EACtB,UAAU,EAAE,YAAY,IAAI,CAAC,MAAM,EAAE,EACrC,aAAa,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAE7C,uEAAgB,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,CACnC,CACR,EACP;KACF;;;;;;;","names":["logo"],"sources":["src/components/crm-bonus/assets/svg/logo.svg","src/components/crm-bonus/crm-bonus.css?tag=crm-bonus&encapsulation=shadow","src/components/crm-bonus/crm-bonus.tsx"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 703 103\" fill=\"none\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\" role=\"img\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M689.2 57.5004L647.1 99.6004L637.3 89.8004L679.4 47.7004H636V33.9004H695C696.9 33.9004 698.5 34.5004 699.7 35.5004C700 35.7004 700.2 35.9004 700.4 36.1004C700.6 36.3004 700.8 36.5004 700.9 36.7004V36.8004V36.9004C702 38.1004 702.7 39.8004 702.7 41.8004V43.6004V67.0004V100.7H688.9V80.8004V57.5004H689.2Z\" fill=\"url(#paint0_linear_1629_188)\"></path>\n<path d=\"M52.7 76.4998H67.7C65.3 91.7998 51.9 102.5 35.2 102.5C15.2 102.5 0 87.2998 0 67.3998C0 47.6998 15.2 32.2998 35.2 32.2998C51.9 32.2998 65.3 42.8998 67.7 58.2998H52.7C50.9 50.7998 44.2 45.6998 35.2 45.6998C22.9 45.6998 14.8 55.3998 14.8 67.3998C14.8 79.4998 22.9 89.0998 35.2 89.0998C44.2 89.1998 50.9 84.0998 52.7 76.4998Z\" fill=\"currentColor\"></path>\n<path d=\"M117.2 32.7002V46.6002C106.6 47.0002 98.5002 51.0002 92.5002 58.8002V100.8H77.7002V34.1002H92.5002V43.2002C98.6002 36.5002 107 32.7002 117.2 32.7002Z\" fill=\"currentColor\"></path>\n<path d=\"M237.4 62.5997V100.8H222.8V62.5997C222.8 50.7997 216.6 45.6997 207 45.6997C200.5 45.6997 194.2 48.0997 189.3 54.7997C189.7 56.8997 189.9 59.2997 189.9 61.7997V100.8H175.2V61.7997C175.2 49.9997 169 45.7997 160.3 45.7997C153.3 45.7997 147.1 48.5997 142.3 55.2997V100.9H127.5V34.1997H142.3V39.8997C147.3 35.3997 153.2 32.4997 162 32.4997C171.5 32.4997 179.2 35.7997 184.1 42.1997C190.6 35.7997 198.2 32.4997 207.9 32.4997C225.5 32.3997 237.4 42.8997 237.4 62.5997Z\" fill=\"currentColor\"></path>\n<path d=\"M320 67.3C320 86.9 304.8 102.5 286.1 102.5C277.6 102.5 270.3 99.9 264.8 95.5V100.8H250V0H264.8V39.2C270.3 34.9 277.6 32.4 286.1 32.4C304.8 32.4 320 48 320 67.3ZM305.2 67.3C305.2 55.5 296.3 45.7 283.9 45.7C276.5 45.7 269.7 48.1 264.7 55.1V79.7C269.7 86.7 276.5 89.2 283.9 89.2C296.3 89.2 305.2 79.2 305.2 67.3Z\" fill=\"currentColor\"></path>\n<path d=\"M399.2 67.5004C399.2 87.9004 384.4 102.6 363.7 102.6C343 102.6 328.2 87.9004 328.2 67.5004C328.2 47.1004 343 32.4004 363.7 32.4004C384.4 32.4004 399.2 47.0004 399.2 67.5004ZM384.4 67.5004C384.4 54.9004 375.7 45.8004 363.7 45.8004C351.7 45.8004 343 54.9004 343 67.5004C343 80.0004 351.7 89.2004 363.7 89.2004C375.7 89.2004 384.4 79.9004 384.4 67.5004Z\" fill=\"currentColor\"></path>\n<path d=\"M474.3 63.5997V100.8H459.5V64.4996C459.5 52.2996 453 45.7997 442.2 45.7997C435.8 45.7997 428.9 49.2996 423.6 55.8996V100.9H408.8V34.1996H423.6V40.1996C429.4 35.1996 436.7 32.4996 445.2 32.4996C462.5 32.3996 474.3 44.2997 474.3 63.5997Z\" fill=\"currentColor\"></path>\n<path d=\"M550.4 34.0996V100.8H535.8V94.2996C530 99.5996 522.7 102.5 514.1 102.5C496.8 102.5 485.1 90.1996 485.1 70.9996V34.0996H499.7V70.1996C499.7 82.3996 506.4 89.1996 517 89.1996C523.5 89.1996 530.3 85.4996 535.7 78.6996V34.0996H550.4Z\" fill=\"currentColor\"></path>\n<path d=\"M591.5 90.5002C600.2 90.5002 606.1 87.7002 606.1 82.4002C606.1 78.4002 602.8 75.6002 597.2 74.6002L582.4 72.0002C572.2 70.3002 562.7 65.2002 562.7 53.1002C562.7 40.2002 573.9 32.2002 590.5 32.2002C603.4 32.2002 618.3 36.6002 619.7 54.1002H606.1C605.4 46.9002 599 44.0002 590.5 44.0002C582 44.0002 577.3 47.1002 577.3 51.8002C577.3 55.3002 579.9 58.8002 587.7 60.0002L600.2 62.0002C610.3 63.8002 620.2 68.2002 620.2 81.2002C620.2 95.3002 607.9 102.5 591.1 102.5C575.3 102.5 561.9 96.3002 560.2 78.7002L573.8 78.8002C575.3 87.0002 581.4 90.5002 591.5 90.5002Z\" fill=\"currentColor\"></path>\n<defs>\n<linearGradient id=\"paint0_linear_1629_188\" x1=\"636.833\" y1=\"97.8261\" x2=\"713.46\" y2=\"26.6582\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#F7A830\"></stop>\n<stop offset=\"0.6353\" stop-color=\"#F08336\"></stop>\n<stop offset=\"1\" stop-color=\"#EA5346\"></stop>\n</linearGradient>\n</defs>\n</svg>","/* :host {\n display: block;\n} */\n\n.container-button {\n max-width: 136px;\n cursor: pointer;\n}\n\n/* padding: 0 15px 15px;\nborder: 1px solid #ddd;\nmargin-bottom: 20px; */","import { Component, Prop, State, h } from '@stencil/core';\nimport logo from './assets/svg/logo.svg';\n\n@Component({\n tag: 'crm-bonus',\n styleUrl: 'crm-bonus.css',\n shadow: true,\n assetsDirs: ['assets']\n})\nexport class MyComponent {\n @State() showModal: boolean = false;\n @Prop({ attribute: 'userid' }) userId: string;\n @Prop({ attribute: 'storename' }) storeName;\n\n render() {\n\n return (\n <div>\n <div class=\"container-button\">\n <img src={logo} onClick={() => (this.showModal = true)} />\n </div>\n <app-modal\n isOpen={this.showModal}\n modalTitle={`Giftback ${this.userId}`}\n onModalClosed={() => (this.showModal = false)}\n >\n <crm-bonus-form storeName={this.storeName} />\n </app-modal>\n </div>\n )\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { B as BUILD, c as consoleDevInfo, H, d as doc, N as NAMESPACE, p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { B as BUILD, c as consoleDevInfo, H, d as doc, N as NAMESPACE, p as promiseResolve, b as bootstrapLazy } from './index-71c2c4ae.js';
|
|
2
|
+
export { s as setNonce } from './index-71c2c4ae.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -43,7 +43,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
43
43
|
|
|
44
44
|
patchBrowser().then(async (options) => {
|
|
45
45
|
await globalScripts();
|
|
46
|
-
return bootstrapLazy([["phone-input-mask",[[1,"phone-input-mask",{"phone":[32],"getPhone":[64]}]]],["crm-bonus-form",[[1,"crm-bonus-form"]]],["app-modal",[[1,"app-modal",{"isOpen":[516,"is-open"],"modalTitle":[1,"modal-title"]}]]],["crm-bonus",[[1,"crm-bonus",{"userId":[1,"userid"],"showModal":[32]}]]]], options);
|
|
46
|
+
return bootstrapLazy([["giftback-pin",[[1,"giftback-pin",{"sent":[16],"pin":[32],"isVerified":[32],"loading":[32]}]]],["phone-input-mask",[[1,"phone-input-mask",{"phone":[32],"getPhone":[64]}]]],["crm-bonus-form",[[1,"crm-bonus-form",{"storeName":[8,"storename"],"loading":[32],"step":[32],"sent":[32]}]]],["app-modal",[[1,"app-modal",{"isOpen":[516,"is-open"],"modalTitle":[1,"modal-title"]}]]],["phone-input",[[0,"phone-input",{"sendPin":[16],"loading":[4]}]]],["giftback-progress",[[1,"giftback-progress",{"maxValue":[2,"max-value"],"totalGiftback":[2,"total-giftback"],"validityDate":[1,"validity-date"],"usedValue":[32]}]]],["crm-bonus",[[1,"crm-bonus",{"userId":[1,"userid"],"storeName":[8,"storename"],"showModal":[32]}]]]], options);
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
//# sourceMappingURL=crmbonus-component-wake.esm.js.map
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-71c2c4ae.js';
|
|
2
|
+
|
|
3
|
+
const giftbackPinCss = ":host{display:block;font-family:Arial, sans-serif}.form-container-pin{display:flex;justify-content:space-around}.pin-container{display:flex;gap:10px;margin:10px 0}input{width:40px;height:40px;font-size:18px;text-align:center;border:1px solid #ccc;border-radius:5px}button{padding:10px 20px;background-color:#ddd;border:none;border-radius:5px;cursor:pointer}button:hover{background-color:#bbb}.success{color:green;margin-top:10px}.button{top:50%;background-color:#6c6c7e;color:#fff;border:none;border-radius:10px;padding:15px;min-height:30px;min-width:120px;font-size:20px;cursor:pointer}";
|
|
4
|
+
|
|
5
|
+
const GiftbackPin = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.sent = undefined;
|
|
9
|
+
this.pin = ['', '', '', ''];
|
|
10
|
+
this.isVerified = false;
|
|
11
|
+
this.loading = false;
|
|
12
|
+
}
|
|
13
|
+
handleInput(event, index) {
|
|
14
|
+
const input = event.target;
|
|
15
|
+
const value = input.value.slice(0, 1); // Limitar a um único dígito
|
|
16
|
+
this.pin[index] = value;
|
|
17
|
+
// Focar no próximo campo, se possível
|
|
18
|
+
if (value && index < this.pin.length - 1) {
|
|
19
|
+
const nextInput = input.nextElementSibling;
|
|
20
|
+
nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
|
|
21
|
+
}
|
|
22
|
+
this.pin = [...this.pin];
|
|
23
|
+
}
|
|
24
|
+
verifyPin() {
|
|
25
|
+
const pinCode = this.pin.join('');
|
|
26
|
+
if (pinCode === '9999') {
|
|
27
|
+
this.isVerified = true;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
render() {
|
|
31
|
+
return (h("div", { key: '7a074474b7049e1c80f74d892539aee10c0c0002', class: "form-container-pin" }, h("div", { key: '47e12b5a6d1f67e8dedfe91944e605c741b4c03f' }, h("p", { key: '4afc3ed9c76e270a2f07aff3c667a2e0ce6058ee' }, "Insira o PIN de 4 d\u00EDgitos enviado por SMS."), h("div", { key: '03d1dd1c0e57d2c97d90b889798dfe38dd431bd4', class: "pin-container" }, this.pin.map((_, index) => (h("input", { type: "text", maxLength: 1, value: this.pin[index], onInput: (event) => this.handleInput(event, index) }))))), h("button", { key: '23f09232c44853ca3e3e782ec5016a15032e040d', class: `button ${this.loading ? 'disabled' : ''} `, disabled: this.loading, onClick: () => { } }, "Enviar")));
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
GiftbackPin.style = giftbackPinCss;
|
|
35
|
+
|
|
36
|
+
export { GiftbackPin as giftback_pin };
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=giftback-pin.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"giftback-pin.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+gBAA+gB;;MCQzhB,WAAW;;;;mBAIK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;0BACV,KAAK;uBAER,KAAK;;IAEjC,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;QACtC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;;QAGxB,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;YACtC,MAAM,SAAS,GAAG,KAAK,CAAC,kBAAsC,CAAC;YAC/D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;SACtB;QAED,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5B;IAED,SAAS;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClC,IAAI,OAAO,KAAK,MAAM,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,8DACI,8GAAiD,EACjD,4DAAK,KAAK,EAAC,eAAe,IACrB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACnB,aACI,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EACtB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,GACpD,CACL,CAAC,CACA,CACJ,EAEN,+DAAQ,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,aAAiB,CAGrH,EACR;KACL;;;;;;","names":[],"sources":["src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.css?tag=giftback-pin&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-pin/giftback-pin.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: Arial, sans-serif;\n}\n\n.pin-container {\n display: flex;\n gap: 10px;\n margin: 10px 0;\n}\n\ninput {\n width: 40px;\n height: 40px;\n font-size: 18px;\n text-align: center;\n border: 1px solid #ccc;\n border-radius: 5px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #ddd;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #bbb;\n}\n\n.success {\n color: green;\n margin-top: 10px;\n}\n\n.button {\n top: 50%;\n background-color: #6c6c7e;\n color: #fff;\n border: none;\n border-radius: 10px;\n padding: 15px;\n min-height: 30px;\n min-width: 120px;\n font-size: 20px;\n cursor: pointer;\n}","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\n @State() pin: string[] = ['', '', '', ''];\n @State() isVerified: boolean = false;\n\n @State() 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 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 <button class={`button ${this.loading ? 'disabled' : ''} `} disabled={this.loading} onClick={() => { }}>Enviar</button>\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"],"version":3}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-71c2c4ae.js';
|
|
2
|
+
|
|
3
|
+
const giftbackProgressCss = ":host{display:flex;font-family:Arial, sans-serif;border-radius:10px;padding:16px;max-width:100%;flex-direction:column}.giftback-container{display:flex;flex-direction:column}.giftback-container p{font-size:medium}h3{margin:0 0 10px;font-size:18px}p{margin:5px 0;font-size:14px}.validity{font-size:12px;color:#888}.progress-container{display:flex;align-items:center;margin:10px 0}progress-container span{font-size:12px;color:#666}input[type='range']{flex:1;margin:0 10px;appearance:none;background-color:#ccc;height:6px;border-radius:3px;outline:none;cursor:pointer}input[type='range']::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background-color:#555;cursor:pointer}.remaining{font-weight:bold;font-size:14px;color:#333}";
|
|
4
|
+
|
|
5
|
+
const GiftbackProgress = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.maxValue = 50;
|
|
9
|
+
this.totalGiftback = 300;
|
|
10
|
+
this.validityDate = '30/10/2024';
|
|
11
|
+
this.usedValue = 25;
|
|
12
|
+
}
|
|
13
|
+
handleSliderChange(event) {
|
|
14
|
+
const input = event.target;
|
|
15
|
+
this.usedValue = parseFloat(input.value);
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
const remainingGiftback = this.totalGiftback - this.usedValue;
|
|
19
|
+
return (h("div", { key: 'b3294c104bfda83a03bfc5587c5e53121807f52c', class: "giftback-container" }, h("p", { key: 'd49fd44b65d9549449df9518889fc5de68a99789' }, "Voc\u00EA possui at\u00E9 ", h("strong", { key: '2d6484e7c8463267459c53f152369c8f92bea207' }, "R$ ", this.maxValue.toFixed(2)), " de Giftback nessa compra!"), h("p", { key: 'e4c4497c8710c10b67a00013430d6b1b57fe4a69', class: "validity" }, "V\u00E1lido at\u00E9: ", this.validityDate), h("p", { key: 'bf1fe5c4638c6a1a3ff94a0a25b4b975f3f1ec43' }, "Voc\u00EA est\u00E1 utilizando ", h("strong", { key: '0febe0bfbf4962b92092051c2ca71cecd8209b0d' }, "R$ ", this.usedValue.toFixed(2)), " nessa compra"), h("div", { key: '8e6589c90b4b9247f8815192b148079ad3da0aec', class: "progress-container" }, h("span", { key: '1e89963a368f4d81fb926fc9a6e6d011097e8d1c' }, "R$ 0"), h("input", { key: 'dbf470eee139e672a6d9604ab5e50f7f0d41750b', type: "range", min: "0", max: this.maxValue, value: this.usedValue, onInput: (event) => this.handleSliderChange(event) }), h("span", { key: '05a2da09b8caec83e26070a1378652053cd89f46' }, "R$ ", this.maxValue.toFixed(2))), h("p", { key: '3e7c376ac10c0e1a3a6b75e02acd6aaae368c70c', class: "remaining" }, "Faltam ", h("strong", { key: '32502e1528bd896865b234d149eafc62057b9179' }, "R$ ", remainingGiftback.toFixed(2)), " para utilizar o valor total do Giftback.")));
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
GiftbackProgress.style = giftbackProgressCss;
|
|
23
|
+
|
|
24
|
+
export { GiftbackProgress as giftback_progress };
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=giftback-progress.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"giftback-progress.entry.esm.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ovBAAovB;;MCOnwB,gBAAgB;;;wBACE,EAAE;6BACG,GAAG;4BACJ,YAAY;yBAEd,EAAE;;IAE/B,kBAAkB,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC5C;IAED,MAAM;QACF,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC;QAE9D,QACI,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,0FACoB,wEAAY,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,+BAC9D,EACJ,0DAAG,KAAK,EAAC,UAAU,8BAAc,IAAI,CAAC,YAAY,CAAK,EAEvD,+FAAwB,wEAAY,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,kBAAiB,EAExF,4DAAK,KAAK,EAAC,oBAAoB,IAC3B,sEAAiB,EACjB,8DACI,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,GACpD,EACF,sEAAU,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ,CACxC,EAEN,0DAAG,KAAK,EAAC,WAAW,eACT,wEAAY,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAU,8CACzD,CACF,EACR;KACL;;;;;;","names":[],"sources":["src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.css?tag=giftback-progress&encapsulation=shadow","src/components/crm-bonus-form/subcomponents/giftback-progress/giftback-progress.tsx"],"sourcesContent":[":host {\n display: flex;\n font-family: Arial, sans-serif;\n /* background-color: #f8f4eb; */\n border-radius: 10px;\n padding: 16px;\n /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */\n max-width: 100%;\n flex-direction: column;\n}\n\n.giftback-container {\n display: flex;\n flex-direction: column;\n}\n\n.giftback-container p {\n font-size: medium;\n}\n\nh3 {\n margin: 0 0 10px;\n font-size: 18px;\n}\n\np {\n margin: 5px 0;\n font-size: 14px;\n}\n\n.validity {\n font-size: 12px;\n color: #888;\n}\n\n.progress-container {\n display: flex;\n align-items: center;\n margin: 10px 0;\n}\n\nprogress-container span {\n font-size: 12px;\n color: #666;\n}\n\ninput[type='range'] {\n flex: 1;\n margin: 0 10px;\n appearance: none;\n background-color: #ccc;\n height: 6px;\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background-color: #555;\n cursor: pointer;\n}\n\n.remaining {\n font-weight: bold;\n font-size: 14px;\n color: #333;\n}","import { Component, h, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'giftback-progress',\n styleUrl: 'giftback-progress.css',\n shadow: true,\n})\nexport class GiftbackProgress {\n @Prop() maxValue: number = 50; // Valor máximo de Giftback permitido na compra\n @Prop() totalGiftback: number = 300; // Valor total disponível de Giftback\n @Prop() validityDate: string = '30/10/2024'; // Data de validade\n\n @State() usedValue: number = 25; // Valor inicial de Giftback utilizado\n\n handleSliderChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.usedValue = parseFloat(input.value);\n }\n\n render() {\n const remainingGiftback = this.totalGiftback - this.usedValue;\n\n return (\n <div class=\"giftback-container\">\n <p>\n Você possui até <strong>R$ {this.maxValue.toFixed(2)}</strong> de Giftback nessa compra!\n </p>\n <p class=\"validity\">Válido até: {this.validityDate}</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 type=\"range\"\n min=\"0\"\n max={this.maxValue}\n value={this.usedValue}\n onInput={(event) => this.handleSliderChange(event)}\n />\n <span>R$ {this.maxValue.toFixed(2)}</span>\n </div>\n\n <p class=\"remaining\">\n Faltam <strong>R$ {remainingGiftback.toFixed(2)}</strong> para utilizar o valor total do Giftback.\n </p>\n </div>\n );\n }\n}\n"],"version":3}
|