vk-payments 0.2.26 → 0.2.27

package/bundles/vk-payments.umd.js

@@ -4070,8 +4070,8 @@
         BankTransferComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'vk-bank-transfer',
-                        template: "<div class=\"bank-transfer-container\">\n  \n  <p class=\"description\">\n    Complet\u00E1 tu CUIT/CUIL para registrar el pago por transferencia. \n    Una vez confirmado, tu pedido quedar\u00E1 sujeto a la aprobaci\u00F3n del pago.\n  </p>\n\n  <form [formGroup]=\"paymentForm\" (ngSubmit)=\"onSubmit()\">\n    \n    <div class=\"form-group\">\n      <label for=\"cuit\">CUIT / CUIL del titular de la cuenta origen *</label>\n      <input \n        type=\"text\" \n        id=\"cuit\" \n        formControlName=\"cuit\" \n        placeholder=\"Ej: 20112223334 (Sin guiones)\" \n        maxlength=\"11\"\n        [ngClass]=\"{'is-invalid': cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)}\"\n      >\n      \n      <div class=\"error-feedback\" *ngIf=\"cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)\">\n        <span *ngIf=\"cuitControl?.errors?.required\">El CUIT/CUIL es obligatorio.</span>\n        <span *ngIf=\"cuitControl?.errors?.pattern\">Debe contener solo n\u00FAmeros.</span>\n        <span *ngIf=\"cuitControl?.errors?.minlength || cuitControl?.errors?.maxlength\">Debe tener exactamente 11 d\u00EDgitos.</span>\n      </div>\n    </div>\n\n    <div class=\"summary-box\">\n      <div class=\"summary-row total\">\n        <span>Total a transferir:</span>\n        <span class=\"amount\">${{ amount | number:'1.2-2' }}</span>\n      </div>\n      <small>* El 10% de descuento ya se encuentra aplicado a este total.</small>\n    </div>\n\n    <!-- Error devuelto por la API -->\n    <div class=\"api-error\" *ngIf=\"errorMessage\">\n      {{ errorMessage }}\n    </div>\n\n    <button type=\"submit\" class=\"btn-submit\" [disabled]=\"paymentForm.invalid || isLoading\">\n      <span *ngIf=\"!isLoading\">Confirmar Pago por Transferencia</span>\n      <span *ngIf=\"isLoading\" class=\"loader\">Procesando...</span>\n    </button>\n\n  </form>\n</div>\n",
-                        styles: [".bank-transfer-container{padding:10px 0}.bank-transfer-container .description{font-size:14px;color:#666;margin-bottom:20px;line-height:1.4}.bank-transfer-container .form-group{margin-bottom:20px}.bank-transfer-container .form-group label{display:block;font-weight:500;margin-bottom:8px;color:#333}.bank-transfer-container .form-group input{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px;transition:border-color .2s}.bank-transfer-container .form-group input:focus{outline:0;border-color:#f48024}.bank-transfer-container .form-group input.is-invalid{border-color:#d32f2f}.bank-transfer-container .form-group .error-feedback{color:#d32f2f;font-size:12px;margin-top:5px;display:block}.bank-transfer-container .summary-box{background:#f5f5f5;padding:15px;border-radius:4px;margin-bottom:20px;text-align:right}.bank-transfer-container .summary-box .summary-row{display:flex;justify-content:flex-end;align-items:center;font-size:18px}.bank-transfer-container .summary-box .summary-row span{margin-left:10px}.bank-transfer-container .summary-box .summary-row span.amount{font-weight:700;color:#2e7d32}.bank-transfer-container .summary-box small{display:block;color:#888;font-size:12px;margin-top:5px}.bank-transfer-container .api-error{background-color:#ffebee;color:#c62828;padding:10px;border-radius:4px;margin-bottom:15px;font-size:14px;text-align:center}.bank-transfer-container .btn-submit{width:100%;padding:12px;background-color:#111;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s}.bank-transfer-container .btn-submit:hover{background-color:#333}.bank-transfer-container .btn-submit:disabled{background-color:#ccc;cursor:not-allowed}.bank-transfer-container .btn-submit .loader{display:inline-block;position:relative}"]
+                        template: "<form\n  [formGroup]=\"paymentForm\"\n  (ngSubmit)=\"onSubmit()\"\n  class=\"bt-payment\"\n  id=\"formularioBT\"\n  autocomplete=\"off\"\n>\n\n  <div class=\"formRow\">\n    <p class=\"description\">\n      Complet\u00E1 tu CUIT/CUIL para registrar el pago por transferencia. \n      Una vez confirmado, tu pedido quedar\u00E1 sujeto a la aprobaci\u00F3n del pago.\n    </p>\n  </div>\n\n  <div class=\"formRow\">\n    <label for=\"cuit\">CUIT / CUIL del titular de la cuenta origen *</label>\n    <span>\n      <input\n        id=\"cuit\"\n        type=\"text\"\n        formControlName=\"cuit\"\n        name=\"cuit\"\n        required\n        maxlength=\"11\"\n        placeholder=\"Ej: 20112223334 (Sin guiones)\"\n        [ngClass]=\"{'is-invalid': cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)}\"\n      />\n    </span>\n    \n    <p\n      class=\"alert-text\"\n      *ngIf=\"cuitControl?.invalid && (cuitControl?.dirty || cuitControl?.touched)\"\n    >\n      <span *ngIf=\"cuitControl?.errors?.required\">El CUIT/CUIL es obligatorio.</span>\n      <span *ngIf=\"cuitControl?.errors?.pattern\">Debe contener solo n\u00FAmeros.</span>\n      <span *ngIf=\"cuitControl?.errors?.minlength || cuitControl?.errors?.maxlength\">Debe tener exactamente 11 d\u00EDgitos.</span>\n    </p>\n  </div>\n\n  <div class=\"summary-box\">\n    <div class=\"summary-row total\">\n      <span>Total a transferir:</span>\n      <span class=\"amount\">${{ amount | number:'1.2-2' }}</span>\n    </div>\n    <small>* El 10% de descuento extra ya se encuentra aplicado a este total.</small>\n  </div>\n\n  <!-- Loading State -->\n  <div *ngIf=\"isLoading\" class=\"pay-message info\">\n    <i class=\"material-icons\">info</i>\n    <p>Procesando informaci\u00F3n de transferencia...</p>\n  </div>\n\n  <!-- Error devuelto por la API -->\n  <div class=\"pay-message error\" *ngIf=\"errorMessage && !isLoading\">\n    <i class=\"material-icons\">error</i>\n    <p>{{ errorMessage }}</p>\n  </div>\n\n  <div>\n    <button type=\"submit\" [disabled]=\"paymentForm.invalid || isLoading\">\n      Confirmar Transferencia\n    </button>\n  </div>\n\n</form>\n",
+                        styles: [".bt-payment{margin-top:15px}.bt-payment p.description{font-size:13px;color:#555;margin-bottom:5px}.bt-payment .formRow{display:flex;flex-direction:column;margin-bottom:25px;position:relative}.bt-payment .formRow label{color:#999;font-size:13px;font-weight:500;line-height:20px}.bt-payment .formRow span input{background-color:transparent!important;border:0;border-bottom:1px solid #d4cfc5!important;color:#212121;cursor:text;font-family:Gotham,\"Helvetica Neue\",Helvetica,Arial,sans-serif!important;font-size:16px;line-height:20px;margin-top:5px;padding-bottom:5px;padding-left:0;resize:none;transition:border-bottom .2s ease-out;width:100%}.bt-payment .formRow span input:focus{border-bottom:1px solid #00f!important;outline:0}.bt-payment .formRow span input.is-invalid{border-bottom:1px solid red!important}.bt-payment .alert-text{font-size:11px;color:red;margin-top:5px;margin-bottom:0}.bt-payment .summary-box{background:#f7f7f7;padding:15px;border-radius:4px;margin-bottom:25px;text-align:right}.bt-payment .summary-box .summary-row{display:flex;justify-content:flex-end;align-items:center;font-size:18px}.bt-payment .summary-box .summary-row span.amount{font-weight:700;color:#2e7d32;margin-left:10px}.bt-payment .summary-box small{display:block;color:#777;font-size:11px;margin-top:5px}.bt-payment button[type=submit]{width:100%;margin-bottom:10px;margin-right:0;display:flex;justify-content:center;align-items:center;background-color:#3f3f3f;border:none;padding:15px;text-transform:uppercase;font-weight:700;font-family:Gotham,\"Helvetica Neue\",Helvetica,Arial,sans-serif;color:#fff;cursor:pointer;border-radius:2px;letter-spacing:.5px;transition:background-color .2s}.bt-payment button[type=submit]:hover{background-color:#555}.bt-payment button[type=submit]:disabled{background-color:#d4cfc5;cursor:not-allowed}.bt-payment .pay-message{display:flex;justify-content:flex-start;align-items:center;border-radius:2px;padding:10px;margin-bottom:15px}.bt-payment .pay-message i{margin-right:15px}.bt-payment .pay-message p{margin:0;padding:0;color:#fff;font-size:14px;font-weight:700}.bt-payment .pay-message.error{background-color:#fca889}.bt-payment .pay-message.error i{color:#f48a60}.bt-payment .pay-message.info{background-color:#aacfd2}.bt-payment .pay-message.info i{color:#72a9b4}.bt-payment .pay-message.success{background-color:#6ad67b;flex-direction:column;align-items:flex-start}.bt-payment .pay-message.success i{color:#57af65;margin-bottom:10px}.bt-payment .pay-message.success p{margin-bottom:5px}.bt-payment .pay-message.success .data{color:#fff;font-size:14px;margin:0;padding:0;display:block}"]
                     }] }
         ];
         /** @nocollapse */