@plasoft/boletos 1.0.74 → 1.0.75

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.
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.744 192.744"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h192.744v192.744H0V0z"/><path d="M40.68 8.496l111.672.072c17.567 0 31.968 14.472 31.896 32.04v111.671c0 17.568-14.399 31.969-32.04 31.969l-111.744-.072c-17.568-.072-31.968-14.4-31.968-32.039L8.64 40.464c0-17.568 14.4-32.04 32.04-31.968z"/><path d="M159.552 88.632h-12.744l-5.256 10.008h8.929l9.071-10.008zm8.425 16.272h-12.385v26.783c0 8.209-5.544 10.512-9.575 10.512-3.889 0-8.137-1.439-8.064-8.566v-28.729h-12.456l-.072 30.527c0 11.809 6.769 17.064 16.128 17.064 6.48.072 11.521-2.809 14.328-7.775h.145v6.479h11.952v-46.295h-.001zM115.776 117.145c0-11.449-12.024-13.537-18.721-13.537-9.72 0-19.728 2.088-21.239 16.273H87.84c.36-2.736 1.512-6.48 7.704-6.48 3.168 0 8.208.287 8.208 5.4 0 2.592-2.448 3.383-4.464 3.672l-11.16 1.656c-7.92 1.08-13.824 5.76-13.824 14.832 0 9.576 7.344 13.535 14.4 13.535 8.496 0 12.528-3.889 15.264-6.695.288 2.52.504 3.168 1.225 5.398l10.656-.07c0-5.113-.072-8.857-.072-8.93v-25.054h-.001zm-12.024 17.496v-5.977c-1.296.936-3.384 1.729-8.496 2.447-4.68.793-8.496 2.018-8.496 7.057 0 4.176 3.456 5.545 5.832 5.545 5.472 0 11.16-3.457 11.16-9.072zM62.856 88.632H50.472v16.2h-6.408v8.713H50.4v28.15c0 5.977 1.944 10.08 12.672 10.08h1.656c1.943 0 3.96-.143 5.832-.215v-9.289c-.864.072-1.8.217-2.592.217-5.04 0-5.184-1.008-5.184-3.816l.072-25.127h7.776v-8.713h-7.776v-16.2zM38.304 88.56H24.912l-.072 62.569h13.392l.072-62.569z" fill="#fff"/></g></svg>
@@ -0,0 +1,326 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Boleto</title>
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ font-family: arial, sans-serif;
15
+ font-size: 10px
16
+ }
17
+ </style>
18
+ </head>
19
+
20
+ <body>
21
+ <div style="display: flex; flex-direction: column; padding: 10px; gap: 10px">
22
+ <div style="border: solid 2px #333333">
23
+ <div style="display: flex; gap: 10px">
24
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCAxOTIuNzQ0IDE5Mi43NDQiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE5Mi43NDR2MTkyLjc0NEgwVjB6Ii8+PHBhdGggZD0iTTQwLjY4IDguNDk2bDExMS42NzIuMDcyYzE3LjU2NyAwIDMxLjk2OCAxNC40NzIgMzEuODk2IDMyLjA0djExMS42NzFjMCAxNy41NjgtMTQuMzk5IDMxLjk2OS0zMi4wNCAzMS45NjlsLTExMS43NDQtLjA3MmMtMTcuNTY4LS4wNzItMzEuOTY4LTE0LjQtMzEuOTY4LTMyLjAzOUw4LjY0IDQwLjQ2NGMwLTE3LjU2OCAxNC40LTMyLjA0IDMyLjA0LTMxLjk2OHoiLz48cGF0aCBkPSJNMTU5LjU1MiA4OC42MzJoLTEyLjc0NGwtNS4yNTYgMTAuMDA4aDguOTI5bDkuMDcxLTEwLjAwOHptOC40MjUgMTYuMjcyaC0xMi4zODV2MjYuNzgzYzAgOC4yMDktNS41NDQgMTAuNTEyLTkuNTc1IDEwLjUxMi0zLjg4OSAwLTguMTM3LTEuNDM5LTguMDY0LTguNTY2di0yOC43MjloLTEyLjQ1NmwtLjA3MiAzMC41MjdjMCAxMS44MDkgNi43NjkgMTcuMDY0IDE2LjEyOCAxNy4wNjQgNi40OC4wNzIgMTEuNTIxLTIuODA5IDE0LjMyOC03Ljc3NWguMTQ1djYuNDc5aDExLjk1MnYtNDYuMjk1aC0uMDAxek0xMTUuNzc2IDExNy4xNDVjMC0xMS40NDktMTIuMDI0LTEzLjUzNy0xOC43MjEtMTMuNTM3LTkuNzIgMC0xOS43MjggMi4wODgtMjEuMjM5IDE2LjI3M0g4Ny44NGMuMzYtMi43MzYgMS41MTItNi40OCA3LjcwNC02LjQ4IDMuMTY4IDAgOC4yMDguMjg3IDguMjA4IDUuNCAwIDIuNTkyLTIuNDQ4IDMuMzgzLTQuNDY0IDMuNjcybC0xMS4xNiAxLjY1NmMtNy45MiAxLjA4LTEzLjgyNCA1Ljc2LTEzLjgyNCAxNC44MzIgMCA5LjU3NiA3LjM0NCAxMy41MzUgMTQuNCAxMy41MzUgOC40OTYgMCAxMi41MjgtMy44ODkgMTUuMjY0LTYuNjk1LjI4OCAyLjUyLjUwNCAzLjE2OCAxLjIyNSA1LjM5OGwxMC42NTYtLjA3YzAtNS4xMTMtLjA3Mi04Ljg1Ny0uMDcyLTguOTN2LTI1LjA1NGgtLjAwMXptLTEyLjAyNCAxNy40OTZ2LTUuOTc3Yy0xLjI5Ni45MzYtMy4zODQgMS43MjktOC40OTYgMi40NDctNC42OC43OTMtOC40OTYgMi4wMTgtOC40OTYgNy4wNTcgMCA0LjE3NiAzLjQ1NiA1LjU0NSA1LjgzMiA1LjU0NSA1LjQ3MiAwIDExLjE2LTMuNDU3IDExLjE2LTkuMDcyek02Mi44NTYgODguNjMySDUwLjQ3MnYxNi4yaC02LjQwOHY4LjcxM0g1MC40djI4LjE1YzAgNS45NzcgMS45NDQgMTAuMDggMTIuNjcyIDEwLjA4aDEuNjU2YzEuOTQzIDAgMy45Ni0uMTQzIDUuODMyLS4yMTV2LTkuMjg5Yy0uODY0LjA3Mi0xLjguMjE3LTIuNTkyLjIxNy01LjA0IDAtNS4xODQtMS4wMDgtNS4xODQtMy44MTZsLjA3Mi0yNS4xMjdoNy43NzZ2LTguNzEzaC03Ljc3NnYtMTYuMnpNMzguMzA0IDg4LjU2SDI0LjkxMmwtLjA3MiA2Mi41NjloMTMuMzkybC4wNzItNjIuNTY5eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=" style="height: 75px" />
25
+ <span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span>
26
+ <div style="width: 1px; border: solid 1px #333333"></div>
27
+ <span style="font-weight: bold; margin-top: auto">341-7</span>
28
+ <div style="width: 1px; border: solid 1px #333333"></div>
29
+ <div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px">
30
+ <span style="font-size: 14px; font-weight: bold; margin-left: auto">RECIBO DO PAGADOR</span>
31
+ <span style="font-size: 16px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span>
32
+ </div>
33
+ </div>
34
+
35
+ <div style="display: flex; border-top: solid 2px #333333">
36
+ <div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px">
37
+ <span style="font-weight: bold">Local de pagamento</span>
38
+ <span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span>
39
+ </div>
40
+ <div style="width: 1px; border: solid 1px #333333"></div>
41
+ <div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px">
42
+ <span style="font-weight: bold">Vencimento</span>
43
+ <span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span>
44
+ </div>
45
+ </div>
46
+
47
+ <div style="display: flex; border-top: solid 2px #333333">
48
+ <div style="display: flex; width: 80%">
49
+ <div style="display: flex; flex-direction: column; flex-grow: 1">
50
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
51
+ <span style="font-weight: bold">Beneficiário</span>
52
+ <div style="display: flex; gap: 200px">
53
+ <span>{{beneficiario.nome}}</span>
54
+ <span>CNPJ: {{beneficiario.cnpjCpf}}</span>
55
+ </div>
56
+ <span>
57
+ <b>Endereço beneficiário:</b>
58
+ {{beneficiario.endereco.logradouro}},
59
+ {{beneficiario.endereco.numero}} -
60
+ {{beneficiario.endereco.bairro}} -
61
+ {{beneficiario.endereco.municipio}}
62
+ {{beneficiario.endereco.uf}}
63
+ CEP: {{beneficiario.endereco.cep}}
64
+ </span>
65
+ </div>
66
+
67
+ <div style="height: 1px; border: solid 1px #333333"></div>
68
+
69
+ <div style="display: flex; gap: 5px">
70
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
71
+ <span style="font-weight: bold">Data do documento</span>
72
+ <span>{{boleto.dataDocumento}}</span>
73
+ </div>
74
+ <div style="width: 1px; border: solid 1px #333333"></div>
75
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
76
+ <span style="font-weight: bold">Núm. do documento</span>
77
+ <span>{{boleto.numeroDocumento}}</span>
78
+ </div>
79
+ <div style="width: 1px; border: solid 1px #333333"></div>
80
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
81
+ <span style="font-weight: bold">Espécie doc.</span>
82
+ <span>{{boleto.especieDocumento}}</span>
83
+ </div>
84
+ <div style="width: 1px; border: solid 1px #333333"></div>
85
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
86
+ <span style="font-weight: bold">Aceite</span>
87
+ <span>{{boleto.aceite}}</span>
88
+ </div>
89
+ <div style="width: 1px; border: solid 1px #333333"></div>
90
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
91
+ <span style="font-weight: bold">Data processamento</span>
92
+ <span>{{boleto.dataProcessamento}}</span>
93
+ </div>
94
+ </div>
95
+
96
+ <div style="height: 1px; border: solid 1px #333333"></div>
97
+
98
+ <div style="display: flex; flex-direction: column; flex-grow: 1; height: 100px; padding: 5px; gap: 5px">
99
+ <span style="font-weight: bold">
100
+ Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO
101
+ </span>
102
+ {{#each boleto.instrucoes as |instrucao|}}
103
+ <span>{{instrucao}}</span>
104
+ {{/each}}
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div style="width: 1px; border: solid 1px #333333"></div>
110
+
111
+ <div style="display: flex; flex-direction: column; flex-grow: 1">
112
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
113
+ <span style="font-weight: bold">Agência/Código Beneficiário</span>
114
+ <span style="font-weight: bold; margin-left: auto">
115
+ {{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}}
116
+ </span>
117
+ </div>
118
+ <div style="height: 1px; border: solid 1px #333333"></div>
119
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
120
+ <span style="font-weight: bold">Nosso Número</span>
121
+ <span style="font-weight: bold; margin-left: auto">
122
+ {{beneficiario.dadosBancario.codigoCarteira}}/{{boleto.nossoNumero}}-{{boleto.nossoNumeroDigito}}
123
+ </span>
124
+ </div>
125
+ <div style="height: 1px; border: solid 1px #333333"></div>
126
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
127
+ <span style="font-weight: bold">(=) Valor do documento</span>
128
+ <span style="font-weight: bold; margin-left: auto">
129
+ {{boleto.valorDocumento}}
130
+ </span>
131
+ </div>
132
+ <div style="height: 1px; border: solid 1px #333333"></div>
133
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
134
+ <span style="font-weight: bold">(-) Descontos/Abatimentos</span>
135
+ <span style="font-weight: bold; margin-left: auto">&nbsp;</span>
136
+ </div>
137
+ <div style="height: 1px; border: solid 1px #333333"></div>
138
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
139
+ <span style="font-weight: bold">(+) Mora/Multa</span>
140
+ <span style="font-weight: bold; margin-left: auto">&nbsp;</span>
141
+ </div>
142
+ <div style="height: 1px; border: solid 1px #333333"></div>
143
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
144
+ <span style="font-weight: bold">(=) Valor cobrado</span>
145
+ <span style="font-weight: bold; margin-left: auto">&nbsp;</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div style="display: flex; border-top: solid 2px #333333; height: 75px; padding: 5px; gap: 250px">
151
+ <span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span>
152
+ <span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpjCpf}}</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div style="border: solid 2px #333333">
157
+ <div style="display: flex; gap: 10px">
158
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiIHZpZXdCb3g9IjAgMCAxOTIuNzQ0IDE5Mi43NDQiPjxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE5Mi43NDR2MTkyLjc0NEgwVjB6Ii8+PHBhdGggZD0iTTQwLjY4IDguNDk2bDExMS42NzIuMDcyYzE3LjU2NyAwIDMxLjk2OCAxNC40NzIgMzEuODk2IDMyLjA0djExMS42NzFjMCAxNy41NjgtMTQuMzk5IDMxLjk2OS0zMi4wNCAzMS45NjlsLTExMS43NDQtLjA3MmMtMTcuNTY4LS4wNzItMzEuOTY4LTE0LjQtMzEuOTY4LTMyLjAzOUw4LjY0IDQwLjQ2NGMwLTE3LjU2OCAxNC40LTMyLjA0IDMyLjA0LTMxLjk2OHoiLz48cGF0aCBkPSJNMTU5LjU1MiA4OC42MzJoLTEyLjc0NGwtNS4yNTYgMTAuMDA4aDguOTI5bDkuMDcxLTEwLjAwOHptOC40MjUgMTYuMjcyaC0xMi4zODV2MjYuNzgzYzAgOC4yMDktNS41NDQgMTAuNTEyLTkuNTc1IDEwLjUxMi0zLjg4OSAwLTguMTM3LTEuNDM5LTguMDY0LTguNTY2di0yOC43MjloLTEyLjQ1NmwtLjA3MiAzMC41MjdjMCAxMS44MDkgNi43NjkgMTcuMDY0IDE2LjEyOCAxNy4wNjQgNi40OC4wNzIgMTEuNTIxLTIuODA5IDE0LjMyOC03Ljc3NWguMTQ1djYuNDc5aDExLjk1MnYtNDYuMjk1aC0uMDAxek0xMTUuNzc2IDExNy4xNDVjMC0xMS40NDktMTIuMDI0LTEzLjUzNy0xOC43MjEtMTMuNTM3LTkuNzIgMC0xOS43MjggMi4wODgtMjEuMjM5IDE2LjI3M0g4Ny44NGMuMzYtMi43MzYgMS41MTItNi40OCA3LjcwNC02LjQ4IDMuMTY4IDAgOC4yMDguMjg3IDguMjA4IDUuNCAwIDIuNTkyLTIuNDQ4IDMuMzgzLTQuNDY0IDMuNjcybC0xMS4xNiAxLjY1NmMtNy45MiAxLjA4LTEzLjgyNCA1Ljc2LTEzLjgyNCAxNC44MzIgMCA5LjU3NiA3LjM0NCAxMy41MzUgMTQuNCAxMy41MzUgOC40OTYgMCAxMi41MjgtMy44ODkgMTUuMjY0LTYuNjk1LjI4OCAyLjUyLjUwNCAzLjE2OCAxLjIyNSA1LjM5OGwxMC42NTYtLjA3YzAtNS4xMTMtLjA3Mi04Ljg1Ny0uMDcyLTguOTN2LTI1LjA1NGgtLjAwMXptLTEyLjAyNCAxNy40OTZ2LTUuOTc3Yy0xLjI5Ni45MzYtMy4zODQgMS43MjktOC40OTYgMi40NDctNC42OC43OTMtOC40OTYgMi4wMTgtOC40OTYgNy4wNTcgMCA0LjE3NiAzLjQ1NiA1LjU0NSA1LjgzMiA1LjU0NSA1LjQ3MiAwIDExLjE2LTMuNDU3IDExLjE2LTkuMDcyek02Mi44NTYgODguNjMySDUwLjQ3MnYxNi4yaC02LjQwOHY4LjcxM0g1MC40djI4LjE1YzAgNS45NzcgMS45NDQgMTAuMDggMTIuNjcyIDEwLjA4aDEuNjU2YzEuOTQzIDAgMy45Ni0uMTQzIDUuODMyLS4yMTV2LTkuMjg5Yy0uODY0LjA3Mi0xLjguMjE3LTIuNTkyLjIxNy01LjA0IDAtNS4xODQtMS4wMDgtNS4xODQtMy44MTZsLjA3Mi0yNS4xMjdoNy43NzZ2LTguNzEzaC03Ljc3NnYtMTYuMnpNMzguMzA0IDg4LjU2SDI0LjkxMmwtLjA3MiA2Mi41NjloMTMuMzkybC4wNzItNjIuNTY5eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=" style="height: 75px" />
159
+ <span style="font-weight: bold; margin-top: auto">Banco Itaú S.A</span>
160
+ <div style="width: 1px; border: solid 1px #333333"></div>
161
+ <span style="font-weight: bold; margin-top: auto">341-7</span>
162
+ <div style="width: 1px; border: solid 1px #333333"></div>
163
+ <div style="display: flex; flex-direction: column; flex-grow: 1; padding:15px">
164
+ <span style="font-size: 16px; font-weight: bold; margin-top: auto">{{boleto.linhaDigitavel}}</span>
165
+ </div>
166
+ </div>
167
+
168
+ <div style="display: flex; border-top: solid 2px #333333">
169
+ <div style="display: flex; flex-direction: column; width: 80%; padding: 5px; gap: 5px">
170
+ <span style="font-weight: bold">Local de pagamento</span>
171
+ <span>Em qualquer banco ou correspondente bancário mesmo após o vencimento</span>
172
+ </div>
173
+ <div style="width: 1px; border: solid 1px #333333"></div>
174
+ <div style="display: flex; flex-direction: column; flex-grow: 1; padding: 5px; gap: 5px">
175
+ <span style="font-weight: bold">Vencimento</span>
176
+ <span style="font-weight: bold; margin-left: auto">{{boleto.dataVencimento}}</span>
177
+ </div>
178
+ </div>
179
+
180
+ <div style="display: flex; border-top: solid 2px #333333">
181
+ <div style="display: flex; width: 80%">
182
+ <div style="display: flex; flex-direction: column; flex-grow: 1">
183
+ <div style="display: flex; flex-direction: column; padding: 5px; gap: 5px">
184
+ <span style="font-weight: bold">Beneficiário</span>
185
+ <div style="display: flex; gap: 200px">
186
+ <span>{{beneficiario.nome}}</span>
187
+ <span>CNPJ: {{beneficiario.cnpjCpf}}</span>
188
+ </div>
189
+ <span>
190
+ <b>Endereço beneficiário:</b>
191
+ {{beneficiario.endereco.logradouro}},
192
+ {{beneficiario.endereco.numero}} -
193
+ {{beneficiario.endereco.bairro}} -
194
+ {{beneficiario.endereco.municipio}}
195
+ {{beneficiario.endereco.uf}}
196
+ CEP: {{beneficiario.endereco.cep}}
197
+ </span>
198
+ </div>
199
+
200
+ <div style="height: 1px; border: solid 1px #333333"></div>
201
+
202
+ <div style="display: flex; gap: 5px">
203
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
204
+ <span style="font-weight: bold">Data do documento</span>
205
+ <span>{{boleto.dataDocumento}}</span>
206
+ </div>
207
+ <div style="width: 1px; border: solid 1px #333333"></div>
208
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
209
+ <span style="font-weight: bold">Núm. do documento</span>
210
+ </div>
211
+ <div style="width: 1px; border: solid 1px #333333"></div>
212
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
213
+ <span style="font-weight: bold">Espécie doc.</span>
214
+ <span>{{boleto.especieDocumento}}</span>
215
+ </div>
216
+ <div style="width: 1px; border: solid 1px #333333"></div>
217
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
218
+ <span style="font-weight: bold">Aceite</span>
219
+ <span>{{boleto.aceite}}</span>
220
+ </div>
221
+ <div style="width: 1px; border: solid 1px #333333"></div>
222
+ <div style="display: flex; flex-direction: column; width: 20%; padding: 5px; gap: 5px">
223
+ <span style="font-weight: bold">Data processamento</span>
224
+ <span>{{boleto.dataProcessamento}}</span>
225
+ </div>
226
+ </div>
227
+
228
+ <div style="height: 1px; border: solid 1px #333333"></div>
229
+
230
+ <div style="display: flex; justify-content: space-between; flex-grow: 1; height: 250px; padding: 5px; gap: 20px">
231
+ <div style="display: flex; flex-direction: column; justify-content: space-between; gap: 5px">
232
+ <div style="display: flex; flex-direction: column; gap: 5px">
233
+ <span style="font-weight: bold">
234
+ Instruções de responsabilidade do BENEFICIÁRIO. Qualquer dúvida sobre este boleto contate o BENEFICIÁRIO
235
+ </span>
236
+ {{#each boleto.instrucoes as |instrucao|}}
237
+ <span>{{instrucao}}</span>
238
+ {{/each}}
239
+ </div>
240
+ <div style="display: flex; flex-direction: column; gap: 5px">
241
+ <span>Escolha a forma mais conveniente para realizar o seu pagamento: Código de barras ou QR Code basta acessar o aplicativo da sua instituição financeira e utilizar apenas uma das opções</span>
242
+ <span style="font-weight: bold">PIX Copia e Cola</span>
243
+ <span>{{boleto.pixCopiaCola}}</span>
244
+ </div>
245
+ </div>
246
+ <img
247
+ width="120px"
248
+ height="120px"
249
+ src="data:image/png;base64,{{boleto.qrCode}}"
250
+ alt="QRCODE INVÁLIDO"
251
+ />
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div style="width: 1px; border: solid 1px #333333"></div>
257
+
258
+ <div style="display: flex; flex-direction: column; flex-grow: 1">
259
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
260
+ <span style="font-weight: bold">Agência/Código Beneficiário</span>
261
+ <span style="font-weight: bold; margin-left: auto; margin-top: auto">
262
+ {{beneficiario.dadosBancario.agencia}}/{{beneficiario.dadosBancario.conta}}-{{beneficiario.dadosBancario.contaDigito}}
263
+ </span>
264
+ </div>
265
+ <div style="height: 1px; border: solid 1px #333333"></div>
266
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
267
+ <span style="font-weight: bold">Nosso Número</span>
268
+ <span style="font-weight: bold; margin-left: auto; margin-top: auto">
269
+ {{beneficiario.dadosBancario.codigoCarteira}}/{{boleto.nossoNumero}}-{{boleto.nossoNumeroDigito}}
270
+ </span>
271
+ </div>
272
+ <div style="height: 1px; border: solid 1px #333333"></div>
273
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
274
+ <span style="font-weight: bold">(=) Valor do documento</span>
275
+ <span style="font-weight: bold; margin-left: auto; margin-top: auto">
276
+ {{boleto.valorDocumento}}
277
+ </span>
278
+ </div>
279
+ <div style="height: 1px; border: solid 1px #333333"></div>
280
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
281
+ <span style="font-weight: bold">(-) Descontos/Abatimentos</span>
282
+ </div>
283
+ <div style="height: 1px; border: solid 1px #333333"></div>
284
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
285
+ <span style="font-weight: bold">(+) Mora/Multa</span>
286
+ </div>
287
+ <div style="height: 1px; border: solid 1px #333333"></div>
288
+ <div style="display: flex; flex-direction: column; height: 16%; padding: 5px; gap: 5px">
289
+ <span style="font-weight: bold">(=) Valor cobrado</span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div style="display: flex; flex-direction: column; border-top: solid 2px #333333; padding: 5px; gap: 10px">
295
+ <div style="display: flex; gap: 250px">
296
+ <span style="font-weight: bold">PAGADOR - {{pagador.nome}}</span>
297
+ <span style="font-weight: bold">CNPJ/CPF: {{pagador.cnpjCpf}}</span>
298
+ </div>
299
+ <span>
300
+ <b>Endereço pagador:</b>
301
+ {{pagador.endereco.logradouro}},
302
+ {{pagador.endereco.numero}} -
303
+ {{pagador.endereco.bairro}} -
304
+ {{pagador.endereco.municipio}}
305
+ {{pagador.endereco.uf}}
306
+ CEP: {{pagador.endereco.cep}}
307
+ </span>
308
+ </div>
309
+
310
+ <div style="display: flex; justify-content: space-between; border-top: solid 2px #333333; padding: 10px">
311
+ <div style="display: flex; width: 500px; height: 60px">
312
+ <img
313
+ src="data:image/png;base64,{{boleto.codigoBarraImage}}"
314
+ alt="{{boleto.codigoBarraImage}}"
315
+ />
316
+ </div>
317
+ <div style="display: flex; flex-direction: column; margin-top: auto; gap: 5px">
318
+ <span style="font-weight: bold">FICHA DE COMPENSAÇÃO</span>
319
+ <span style="font-weight: bold">AUTENTICAÇÃO MECÂNICA</span>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </body>
325
+
326
+ </html>