@odus/checkout 0.16.1 → 0.18.0-beta.0

package/dist/index.css

@@ -1 +1 @@
-.form-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.payment-methods{display:flex;flex-direction:column;gap:12px}.skeleton-container{display:flex;flex-direction:column;gap:12px;padding:4px;position:relative;height:49px;max-width:100%;text-align:left;inset:0;width:100%}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0 0 -16px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 270deg,#134e4a 0deg,#0f766e 90deg,#0d9488 180deg,#5eaba3 240deg,rgba(13,148,136,.2) 300deg,transparent 330deg);animation:spin 1s linear infinite;position:relative}.loader:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}@keyframes spin{to{transform:rotate(360deg)}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.form-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}.address-section{display:flex;flex-direction:column;gap:6px}.address-section-title{font-size:14px;font-weight:600;margin:0;padding:0}.address-same-as-billing{display:flex;align-items:center;gap:4px;cursor:pointer}.address-same-as-billing input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.address-same-as-billing .checkbox-icon{width:24px;height:24px;flex-shrink:0;cursor:pointer}.address-same-as-billing .checkbox-icon .checkbox-checked{display:none}.address-same-as-billing .checkbox-icon .checkbox-unchecked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-checked{display:block}.address-same-as-billing input[type=checkbox]:checked+.checkbox-icon .checkbox-unchecked{display:none}.address-same-as-billing label{font-size:14px;cursor:pointer}.address-fields{display:flex;flex-direction:column;gap:12px;transition:opacity .2s ease}.address-row{display:flex;gap:12px}.address-row-single{width:100%}.address-row-single>*{flex:1}.address-row-double{width:100%}.address-row-double>*{flex:1;min-width:0}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.form-select{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 32px 8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23717173' d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.form-select-error{color:#dc2727}.form-select-placeholder{color:#d4d4d5}.form-select option[disabled]{color:#717173;opacity:.5}.form-select:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:18px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.payment-methods{display:flex;flex-direction:column;gap:12px}.skeleton-container{display:flex;flex-direction:column;gap:12px;padding:4px;position:relative;height:49px;max-width:100%;text-align:left;inset:0;width:100%}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0 0 -16px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 270deg,#134e4a 0deg,#0f766e 90deg,#0d9488 180deg,#5eaba3 240deg,rgba(13,148,136,.2) 300deg,transparent 330deg);animation:spin 1s linear infinite;position:relative}.loader:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}@keyframes spin{to{transform:rotate(360deg)}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.16.1",
+  "version": "0.18.0-beta.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",
@@ -34,6 +34,9 @@
     "targets": {
       "build": {
         "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
         "inputs": [
           "production",
           "^production",
@@ -59,6 +62,24 @@
             "mode": "production"
           }
         }
+      },
+      "build:watch": {
+        "executor": "@nx/vite:build",
+        "options": {
+          "outputPath": "libs/checkout/dist",
+          "main": "libs/checkout/src/index.ts",
+          "tsConfig": "libs/checkout/tsconfig.lib.json",
+          "watch": true
+        },
+        "defaultConfiguration": "development",
+        "configurations": {
+          "development": {
+            "mode": "development"
+          },
+          "production": {
+            "mode": "production"
+          }
+        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.16.1",
+  "version": "0.18.0-beta.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",
@@ -34,6 +34,9 @@
     "targets": {
       "build": {
         "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
         "inputs": [
           "production",
           "^production",
@@ -59,6 +62,24 @@
             "mode": "production"
           }
         }
+      },
+      "build:watch": {
+        "executor": "@nx/vite:build",
+        "options": {
+          "outputPath": "libs/checkout/dist",
+          "main": "libs/checkout/src/index.ts",
+          "tsConfig": "libs/checkout/tsconfig.lib.json",
+          "watch": true
+        },
+        "defaultConfiguration": "development",
+        "configurations": {
+          "development": {
+            "mode": "development"
+          },
+          "production": {
+            "mode": "production"
+          }
+        }
       }
     }
   },