@mj-biz-apps/orders-ng 5.34.0 → 5.34.1
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.
|
@@ -38674,7 +38674,7 @@ var MJCheckoutWidgetComponent = class _MJCheckoutWidgetComponent {
|
|
|
38674
38674
|
\u0275\u0275advance(3);
|
|
38675
38675
|
\u0275\u0275property("disabled", ctx.isProcessing);
|
|
38676
38676
|
}
|
|
38677
|
-
}, dependencies: [CommonModule, FormsModule, NgSelectOption, \u0275NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, NgControlStatus, RequiredValidator, MaxLengthValidator, MinValidator, MaxValidator, NgModel], styles: ['[_nghost-%COMP%] {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n color: #334155;\n margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 0.2rem;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}'], changeDetection: 0 });
|
|
38677
|
+
}, dependencies: [CommonModule, FormsModule, NgSelectOption, \u0275NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, NgControlStatus, RequiredValidator, MaxLengthValidator, MinValidator, MaxValidator, NgModel], styles: ['[_nghost-%COMP%] {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 400;\n color: #334155;\n margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 0.2rem;\n}\n\n\n\n\n\n.mj-checkbox-label[_ngcontent-%COMP%] input[type=checkbox][_ngcontent-%COMP%], \n.mj-checkout-consent[_ngcontent-%COMP%] input[type=checkbox][_ngcontent-%COMP%] {\n width: auto;\n height: auto;\n padding: 0;\n border: 0;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}'], changeDetection: 0 });
|
|
38678
38678
|
};
|
|
38679
38679
|
(() => {
|
|
38680
38680
|
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MJCheckoutWidgetComponent, [{
|
|
@@ -39116,464 +39116,7 @@ var MJCheckoutWidgetComponent = class _MJCheckoutWidgetComponent {
|
|
|
39116
39116
|
</button>
|
|
39117
39117
|
</div>
|
|
39118
39118
|
</div>
|
|
39119
|
-
`, styles: [
|
|
39120
|
-
display: block;
|
|
39121
|
-
font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
|
|
39122
|
-
color: var(--mj-text-color, #1e293b);
|
|
39123
|
-
}
|
|
39124
|
-
|
|
39125
|
-
.mj-checkout-widget-container {
|
|
39126
|
-
max-width: 560px;
|
|
39127
|
-
margin: 0 auto;
|
|
39128
|
-
background: var(--mj-bg-color, #ffffff);
|
|
39129
|
-
border: 1px solid #e2e8f0;
|
|
39130
|
-
border-radius: var(--mj-border-radius, 8px);
|
|
39131
|
-
padding: 24px;
|
|
39132
|
-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
39133
|
-
}
|
|
39134
|
-
|
|
39135
|
-
.mj-widget-header {
|
|
39136
|
-
margin-bottom: 20px;
|
|
39137
|
-
}
|
|
39138
|
-
|
|
39139
|
-
.mj-widget-title {
|
|
39140
|
-
margin: 0 0 6px 0;
|
|
39141
|
-
font-size: 1.35rem;
|
|
39142
|
-
font-weight: 700;
|
|
39143
|
-
color: var(--mj-text-color, #0f172a);
|
|
39144
|
-
}
|
|
39145
|
-
|
|
39146
|
-
.mj-widget-description {
|
|
39147
|
-
margin: 0;
|
|
39148
|
-
font-size: 0.9rem;
|
|
39149
|
-
color: #64748b;
|
|
39150
|
-
line-height: 1.4;
|
|
39151
|
-
}
|
|
39152
|
-
|
|
39153
|
-
.mj-widget-error-banner {
|
|
39154
|
-
display: flex;
|
|
39155
|
-
align-items: center;
|
|
39156
|
-
gap: 8px;
|
|
39157
|
-
background: #fef2f2;
|
|
39158
|
-
border: 1px solid #f87171;
|
|
39159
|
-
color: #991b1b;
|
|
39160
|
-
padding: 10px 14px;
|
|
39161
|
-
border-radius: 6px;
|
|
39162
|
-
margin-bottom: 18px;
|
|
39163
|
-
font-size: 0.875rem;
|
|
39164
|
-
}
|
|
39165
|
-
|
|
39166
|
-
.mj-error-icon {
|
|
39167
|
-
font-size: 1rem;
|
|
39168
|
-
}
|
|
39169
|
-
|
|
39170
|
-
.mj-widget-summary-card {
|
|
39171
|
-
background: #f8fafc;
|
|
39172
|
-
border: 1px solid #e2e8f0;
|
|
39173
|
-
border-radius: 6px;
|
|
39174
|
-
padding: 14px 16px;
|
|
39175
|
-
margin-bottom: 20px;
|
|
39176
|
-
}
|
|
39177
|
-
|
|
39178
|
-
.mj-summary-row {
|
|
39179
|
-
display: flex;
|
|
39180
|
-
justify-content: space-between;
|
|
39181
|
-
align-items: center;
|
|
39182
|
-
}
|
|
39183
|
-
|
|
39184
|
-
.mj-summary-price {
|
|
39185
|
-
display: flex;
|
|
39186
|
-
align-items: center;
|
|
39187
|
-
}
|
|
39188
|
-
|
|
39189
|
-
.mj-widget-form-section {
|
|
39190
|
-
margin-bottom: 20px;
|
|
39191
|
-
}
|
|
39192
|
-
|
|
39193
|
-
.mj-summary-item-info {
|
|
39194
|
-
display: flex;
|
|
39195
|
-
align-items: center;
|
|
39196
|
-
gap: 8px;
|
|
39197
|
-
}
|
|
39198
|
-
|
|
39199
|
-
.mj-product-name {
|
|
39200
|
-
font-weight: 600;
|
|
39201
|
-
font-size: 1rem;
|
|
39202
|
-
color: #1e293b;
|
|
39203
|
-
}
|
|
39204
|
-
|
|
39205
|
-
.mj-badge-free {
|
|
39206
|
-
background: #dcfce7;
|
|
39207
|
-
color: #166534;
|
|
39208
|
-
font-size: 0.75rem;
|
|
39209
|
-
font-weight: 700;
|
|
39210
|
-
padding: 2px 6px;
|
|
39211
|
-
border-radius: 4px;
|
|
39212
|
-
}
|
|
39213
|
-
|
|
39214
|
-
.mj-price-free {
|
|
39215
|
-
font-weight: 700;
|
|
39216
|
-
color: #166534;
|
|
39217
|
-
font-size: 1.1rem;
|
|
39218
|
-
}
|
|
39219
|
-
|
|
39220
|
-
.mj-price-amount {
|
|
39221
|
-
font-weight: 700;
|
|
39222
|
-
color: #0f172a;
|
|
39223
|
-
font-size: 1.1rem;
|
|
39224
|
-
}
|
|
39225
|
-
|
|
39226
|
-
.mj-quantity-selector-row {
|
|
39227
|
-
display: flex;
|
|
39228
|
-
justify-content: space-between;
|
|
39229
|
-
align-items: center;
|
|
39230
|
-
margin-top: 12px;
|
|
39231
|
-
padding-top: 12px;
|
|
39232
|
-
border-top: 1px dashed #cbd5e1;
|
|
39233
|
-
}
|
|
39234
|
-
|
|
39235
|
-
.mj-qty-controls {
|
|
39236
|
-
display: flex;
|
|
39237
|
-
align-items: center;
|
|
39238
|
-
gap: 4px;
|
|
39239
|
-
}
|
|
39240
|
-
|
|
39241
|
-
.mj-qty-btn {
|
|
39242
|
-
width: 28px;
|
|
39243
|
-
height: 28px;
|
|
39244
|
-
background: #ffffff;
|
|
39245
|
-
border: 1px solid #cbd5e1;
|
|
39246
|
-
border-radius: 4px;
|
|
39247
|
-
cursor: pointer;
|
|
39248
|
-
font-weight: 600;
|
|
39249
|
-
display: flex;
|
|
39250
|
-
align-items: center;
|
|
39251
|
-
justify-content: center;
|
|
39252
|
-
}
|
|
39253
|
-
|
|
39254
|
-
.mj-qty-btn:disabled {
|
|
39255
|
-
opacity: 0.4;
|
|
39256
|
-
cursor: not-allowed;
|
|
39257
|
-
}
|
|
39258
|
-
|
|
39259
|
-
.mj-qty-input {
|
|
39260
|
-
width: 44px;
|
|
39261
|
-
height: 28px;
|
|
39262
|
-
text-align: center;
|
|
39263
|
-
border: 1px solid #cbd5e1;
|
|
39264
|
-
border-radius: 4px;
|
|
39265
|
-
font-weight: 600;
|
|
39266
|
-
}
|
|
39267
|
-
|
|
39268
|
-
.mj-section-title {
|
|
39269
|
-
font-size: 1rem;
|
|
39270
|
-
font-weight: 600;
|
|
39271
|
-
margin: 0 0 12px 0;
|
|
39272
|
-
color: #334155;
|
|
39273
|
-
}
|
|
39274
|
-
|
|
39275
|
-
.mj-form-grid {
|
|
39276
|
-
display: grid;
|
|
39277
|
-
grid-template-columns: 1fr 1fr;
|
|
39278
|
-
gap: 12px;
|
|
39279
|
-
margin-bottom: 18px;
|
|
39280
|
-
}
|
|
39281
|
-
|
|
39282
|
-
.mj-form-group {
|
|
39283
|
-
display: flex;
|
|
39284
|
-
flex-direction: column;
|
|
39285
|
-
gap: 4px;
|
|
39286
|
-
}
|
|
39287
|
-
|
|
39288
|
-
.mj-form-group.full-width {
|
|
39289
|
-
grid-column: 1 / -1;
|
|
39290
|
-
}
|
|
39291
|
-
|
|
39292
|
-
.mj-label {
|
|
39293
|
-
font-size: 0.8rem;
|
|
39294
|
-
font-weight: 500;
|
|
39295
|
-
color: #475569;
|
|
39296
|
-
}
|
|
39297
|
-
|
|
39298
|
-
.mj-required {
|
|
39299
|
-
color: #ef4444;
|
|
39300
|
-
}
|
|
39301
|
-
|
|
39302
|
-
.mj-input, .mj-select {
|
|
39303
|
-
padding: 8px 12px;
|
|
39304
|
-
font-size: 0.9rem;
|
|
39305
|
-
border: 1px solid #cbd5e1;
|
|
39306
|
-
border-radius: 4px;
|
|
39307
|
-
background: #ffffff;
|
|
39308
|
-
color: #1e293b;
|
|
39309
|
-
outline: none;
|
|
39310
|
-
transition: border-color 0.15s ease;
|
|
39311
|
-
width: 100%;
|
|
39312
|
-
box-sizing: border-box;
|
|
39313
|
-
}
|
|
39314
|
-
|
|
39315
|
-
.mj-textarea {
|
|
39316
|
-
min-height: 70px;
|
|
39317
|
-
resize: vertical;
|
|
39318
|
-
font-family: inherit;
|
|
39319
|
-
}
|
|
39320
|
-
|
|
39321
|
-
.mj-select {
|
|
39322
|
-
min-height: 38px;
|
|
39323
|
-
}
|
|
39324
|
-
|
|
39325
|
-
.mj-checkbox-label {
|
|
39326
|
-
display: inline-flex;
|
|
39327
|
-
align-items: center;
|
|
39328
|
-
gap: 8px;
|
|
39329
|
-
cursor: pointer;
|
|
39330
|
-
font-size: 0.9rem;
|
|
39331
|
-
color: #334155;
|
|
39332
|
-
margin-top: 4px;
|
|
39333
|
-
}
|
|
39334
|
-
|
|
39335
|
-
/* The free-text answer that appears under a question's "Other" choice. */
|
|
39336
|
-
.mj-question-other {
|
|
39337
|
-
margin-top: 8px;
|
|
39338
|
-
}
|
|
39339
|
-
|
|
39340
|
-
/* A choice group: its options stacked, with how many to pick beside the heading. */
|
|
39341
|
-
.mj-choice-group {
|
|
39342
|
-
border: 0;
|
|
39343
|
-
margin: 0;
|
|
39344
|
-
padding: 0;
|
|
39345
|
-
}
|
|
39346
|
-
|
|
39347
|
-
.mj-choice-count {
|
|
39348
|
-
font-weight: normal;
|
|
39349
|
-
color: #64748b;
|
|
39350
|
-
}
|
|
39351
|
-
|
|
39352
|
-
.mj-choice-options {
|
|
39353
|
-
display: flex;
|
|
39354
|
-
flex-direction: column;
|
|
39355
|
-
gap: 2px;
|
|
39356
|
-
}
|
|
39357
|
-
|
|
39358
|
-
.mj-checkbox-label.is-disabled {
|
|
39359
|
-
cursor: not-allowed;
|
|
39360
|
-
opacity: 0.55;
|
|
39361
|
-
}
|
|
39362
|
-
|
|
39363
|
-
.mj-input:focus, .mj-select:focus {
|
|
39364
|
-
border-color: var(--mj-primary-color, #2563eb);
|
|
39365
|
-
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
|
|
39366
|
-
}
|
|
39367
|
-
|
|
39368
|
-
.mj-multi-attendee-header {
|
|
39369
|
-
display: flex;
|
|
39370
|
-
justify-content: space-between;
|
|
39371
|
-
align-items: center;
|
|
39372
|
-
margin-bottom: 12px;
|
|
39373
|
-
}
|
|
39374
|
-
|
|
39375
|
-
.mj-btn-link {
|
|
39376
|
-
background: none;
|
|
39377
|
-
border: none;
|
|
39378
|
-
color: var(--mj-primary-color, #2563eb);
|
|
39379
|
-
font-size: 0.8rem;
|
|
39380
|
-
cursor: pointer;
|
|
39381
|
-
text-decoration: underline;
|
|
39382
|
-
padding: 0;
|
|
39383
|
-
}
|
|
39384
|
-
|
|
39385
|
-
.mj-attendee-matrix {
|
|
39386
|
-
display: flex;
|
|
39387
|
-
flex-direction: column;
|
|
39388
|
-
gap: 14px;
|
|
39389
|
-
margin-bottom: 20px;
|
|
39390
|
-
}
|
|
39391
|
-
|
|
39392
|
-
.mj-attendee-card {
|
|
39393
|
-
background: #f8fafc;
|
|
39394
|
-
border: 1px solid #e2e8f0;
|
|
39395
|
-
border-radius: 6px;
|
|
39396
|
-
padding: 12px 14px;
|
|
39397
|
-
}
|
|
39398
|
-
|
|
39399
|
-
.mj-attendee-card-title {
|
|
39400
|
-
font-size: 0.85rem;
|
|
39401
|
-
font-weight: 600;
|
|
39402
|
-
color: #475569;
|
|
39403
|
-
margin-bottom: 10px;
|
|
39404
|
-
}
|
|
39405
|
-
|
|
39406
|
-
/* Stripe Payment Container */
|
|
39407
|
-
.mj-widget-payment-section {
|
|
39408
|
-
margin-top: 16px;
|
|
39409
|
-
padding-top: 16px;
|
|
39410
|
-
border-top: 1px solid #e2e8f0;
|
|
39411
|
-
}
|
|
39412
|
-
|
|
39413
|
-
.mj-stripe-container {
|
|
39414
|
-
background: #ffffff;
|
|
39415
|
-
border: 1px solid #e2e8f0;
|
|
39416
|
-
border-radius: 6px;
|
|
39417
|
-
padding: 14px;
|
|
39418
|
-
margin-bottom: 16px;
|
|
39419
|
-
}
|
|
39420
|
-
|
|
39421
|
-
.mj-stripe-mount-point {
|
|
39422
|
-
min-height: 40px;
|
|
39423
|
-
}
|
|
39424
|
-
|
|
39425
|
-
.mj-stripe-badge {
|
|
39426
|
-
display: flex;
|
|
39427
|
-
align-items: center;
|
|
39428
|
-
gap: 6px;
|
|
39429
|
-
margin-top: 10px;
|
|
39430
|
-
font-size: 0.75rem;
|
|
39431
|
-
color: #64748b;
|
|
39432
|
-
}
|
|
39433
|
-
|
|
39434
|
-
.mj-stripe-lock-icon {
|
|
39435
|
-
font-size: 0.85rem;
|
|
39436
|
-
}
|
|
39437
|
-
|
|
39438
|
-
.mj-checkout-total-row {
|
|
39439
|
-
display: flex;
|
|
39440
|
-
justify-content: space-between;
|
|
39441
|
-
align-items: center;
|
|
39442
|
-
padding: 12px 0;
|
|
39443
|
-
border-top: 1px solid #e2e8f0;
|
|
39444
|
-
margin-top: 10px;
|
|
39445
|
-
margin-bottom: 18px;
|
|
39446
|
-
}
|
|
39447
|
-
|
|
39448
|
-
.mj-total-label {
|
|
39449
|
-
font-weight: 700;
|
|
39450
|
-
font-size: 1.05rem;
|
|
39451
|
-
color: #0f172a;
|
|
39452
|
-
}
|
|
39453
|
-
|
|
39454
|
-
.mj-total-amount {
|
|
39455
|
-
font-weight: 800;
|
|
39456
|
-
font-size: 1.25rem;
|
|
39457
|
-
color: var(--mj-primary-color, #2563eb);
|
|
39458
|
-
}
|
|
39459
|
-
|
|
39460
|
-
.mj-widget-actions {
|
|
39461
|
-
margin-top: 12px;
|
|
39462
|
-
display: flex;
|
|
39463
|
-
flex-direction: column;
|
|
39464
|
-
gap: 8px;
|
|
39465
|
-
}
|
|
39466
|
-
|
|
39467
|
-
.mj-btn-submit {
|
|
39468
|
-
width: 100%;
|
|
39469
|
-
padding: 12px;
|
|
39470
|
-
background: var(--mj-primary-color, #2563eb);
|
|
39471
|
-
color: #ffffff;
|
|
39472
|
-
font-size: 1rem;
|
|
39473
|
-
font-weight: 600;
|
|
39474
|
-
border: none;
|
|
39475
|
-
border-radius: var(--mj-border-radius, 8px);
|
|
39476
|
-
cursor: pointer;
|
|
39477
|
-
display: flex;
|
|
39478
|
-
align-items: center;
|
|
39479
|
-
justify-content: center;
|
|
39480
|
-
gap: 8px;
|
|
39481
|
-
transition: opacity 0.15s ease;
|
|
39482
|
-
}
|
|
39483
|
-
|
|
39484
|
-
.mj-btn-submit:hover:not(:disabled) {
|
|
39485
|
-
opacity: 0.92;
|
|
39486
|
-
}
|
|
39487
|
-
|
|
39488
|
-
.mj-btn-submit:disabled {
|
|
39489
|
-
opacity: 0.5;
|
|
39490
|
-
cursor: not-allowed;
|
|
39491
|
-
}
|
|
39492
|
-
|
|
39493
|
-
.mj-btn-cancel {
|
|
39494
|
-
width: 100%;
|
|
39495
|
-
padding: 8px 12px;
|
|
39496
|
-
background: transparent;
|
|
39497
|
-
color: #64748b;
|
|
39498
|
-
font-size: 0.875rem;
|
|
39499
|
-
font-weight: 500;
|
|
39500
|
-
border: none;
|
|
39501
|
-
cursor: pointer;
|
|
39502
|
-
text-align: center;
|
|
39503
|
-
}
|
|
39504
|
-
|
|
39505
|
-
.mj-btn-cancel:hover:not(:disabled) {
|
|
39506
|
-
color: #334155;
|
|
39507
|
-
text-decoration: underline;
|
|
39508
|
-
}
|
|
39509
|
-
|
|
39510
|
-
.mj-spinner {
|
|
39511
|
-
width: 16px;
|
|
39512
|
-
height: 16px;
|
|
39513
|
-
border: 2px solid #ffffff;
|
|
39514
|
-
border-top-color: transparent;
|
|
39515
|
-
border-radius: 50%;
|
|
39516
|
-
animation: mj-spin 0.8s linear infinite;
|
|
39517
|
-
}
|
|
39518
|
-
|
|
39519
|
-
@keyframes mj-spin {
|
|
39520
|
-
to { transform: rotate(360deg); }
|
|
39521
|
-
}
|
|
39522
|
-
|
|
39523
|
-
.mj-checkout-consent {
|
|
39524
|
-
display: flex;
|
|
39525
|
-
gap: 0.5rem;
|
|
39526
|
-
align-items: flex-start;
|
|
39527
|
-
margin: 0.75rem 0;
|
|
39528
|
-
font-size: 0.875rem;
|
|
39529
|
-
line-height: 1.4;
|
|
39530
|
-
}
|
|
39531
|
-
.mj-checkout-consent input {
|
|
39532
|
-
margin-top: 0.2rem;
|
|
39533
|
-
flex: 0 0 auto;
|
|
39534
|
-
}
|
|
39535
|
-
|
|
39536
|
-
.mj-checkout-promo {
|
|
39537
|
-
margin: 0.75rem 0;
|
|
39538
|
-
}
|
|
39539
|
-
.mj-checkout-promo__label {
|
|
39540
|
-
display: block;
|
|
39541
|
-
font-size: 0.875rem;
|
|
39542
|
-
margin-bottom: 0.25rem;
|
|
39543
|
-
}
|
|
39544
|
-
.mj-checkout-promo__row {
|
|
39545
|
-
display: flex;
|
|
39546
|
-
gap: 0.5rem;
|
|
39547
|
-
}
|
|
39548
|
-
.mj-checkout-promo__input {
|
|
39549
|
-
flex: 1 1 auto;
|
|
39550
|
-
}
|
|
39551
|
-
.mj-checkout-promo__error {
|
|
39552
|
-
color: var(--mj-error-color, #b91c1c);
|
|
39553
|
-
font-size: 0.875rem;
|
|
39554
|
-
margin: 0.35rem 0 0;
|
|
39555
|
-
}
|
|
39556
|
-
.mj-checkout-promo__applied {
|
|
39557
|
-
color: var(--mj-success-color, #15803d);
|
|
39558
|
-
font-size: 0.875rem;
|
|
39559
|
-
margin: 0.35rem 0 0;
|
|
39560
|
-
}
|
|
39561
|
-
.mj-checkout-promo__apply {
|
|
39562
|
-
flex: 0 0 auto;
|
|
39563
|
-
padding: 8px 14px;
|
|
39564
|
-
background: transparent;
|
|
39565
|
-
color: var(--mj-primary-color, #2563eb);
|
|
39566
|
-
border: 1px solid var(--mj-border-color, #cbd5e1);
|
|
39567
|
-
border-radius: var(--mj-border-radius, 8px);
|
|
39568
|
-
font-size: 0.875rem;
|
|
39569
|
-
font-weight: 600;
|
|
39570
|
-
cursor: pointer;
|
|
39571
|
-
}
|
|
39572
|
-
.mj-checkout-promo__apply:disabled {
|
|
39573
|
-
opacity: 0.5;
|
|
39574
|
-
cursor: not-allowed;
|
|
39575
|
-
}
|
|
39576
|
-
`] }]
|
|
39119
|
+
`, styles: [':host {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n margin-bottom: 20px;\n}\n\n.mj-widget-title {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width {\n grid-column: 1 / -1;\n}\n\n.mj-label {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required {\n color: #ef4444;\n}\n\n.mj-input, .mj-select {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select {\n min-height: 38px;\n}\n\n.mj-checkbox-label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 400;\n color: #334155;\n margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question\'s "Other" choice. */\n.mj-question-other {\n margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n min-height: 40px;\n}\n\n.mj-stripe-badge {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n}\n.mj-checkout-consent input {\n margin-top: 0.2rem;\n}\n\n/* Checkboxes keep their native size even when the host page styles every input\n (e.g. `input { width: 100% }`): this rule is scoped to the widget, so it outranks\n a plain element or class selector on the host page. */\n.mj-checkbox-label input[type=checkbox],\n.mj-checkout-consent input[type=checkbox] {\n width: auto;\n height: auto;\n padding: 0;\n border: 0;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n'] }]
|
|
39577
39120
|
}], () => [{ type: ElementRef }, { type: Renderer2 }], { config: [{
|
|
39578
39121
|
type: Input
|
|
39579
39122
|
}], distributionSlug: [{
|
|
@@ -1353,11 +1353,11 @@ export class MJCheckoutWidgetComponent {
|
|
|
1353
1353
|
i0.ɵɵconditional(ctx.isProcessing ? 45 : ctx.isFree() ? 46 : 47);
|
|
1354
1354
|
i0.ɵɵadvance(3);
|
|
1355
1355
|
i0.ɵɵproperty("disabled", ctx.isProcessing);
|
|
1356
|
-
} }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.RequiredValidator, i1.MaxLengthValidator, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["[_nghost-%COMP%] {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n color: #334155;\n margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 0.2rem;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}"], changeDetection: 0 });
|
|
1356
|
+
} }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.RequiredValidator, i1.MaxLengthValidator, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["[_nghost-%COMP%] {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 400;\n color: #334155;\n margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n margin-top: 0.2rem;\n}\n\n\n\n\n\n.mj-checkbox-label[_ngcontent-%COMP%] input[type=checkbox][_ngcontent-%COMP%], \n.mj-checkout-consent[_ngcontent-%COMP%] input[type=checkbox][_ngcontent-%COMP%] {\n width: auto;\n height: auto;\n padding: 0;\n border: 0;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}"], changeDetection: 0 });
|
|
1357
1357
|
}
|
|
1358
1358
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCheckoutWidgetComponent, [{
|
|
1359
1359
|
type: Component,
|
|
1360
|
-
args: [{ selector: 'mj-checkout-widget', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-checkout-widget-container\"\n [style.--mj-primary-color]=\"activeTheme()?.primaryColor || '#2563eb'\"\n [style.--mj-accent-color]=\"activeTheme()?.accentColor || '#3b82f6'\"\n [style.--mj-border-radius]=\"activeTheme()?.borderRadius || '8px'\"\n [style.--mj-bg-color]=\"activeTheme()?.backgroundColor || '#ffffff'\"\n [style.--mj-text-color]=\"activeTheme()?.textColor || '#0f172a'\"\n [style.--mj-font-family]=\"activeTheme()?.fontFamily || 'inherit'\">\n\n <!-- Widget Header -->\n <header class=\"mj-widget-header\">\n <h2 class=\"mj-widget-title\">{{ config?.title || 'Checkout' }}</h2>\n @if (config?.description) {\n <p class=\"mj-widget-description\">{{ config?.description }}</p>\n }\n </header>\n\n <!-- Error Banner -->\n @if (displayErrorMessage()) {\n <div class=\"mj-widget-error-banner\" role=\"alert\">\n <span class=\"mj-error-icon\">\u26A0\uFE0F</span>\n <span>{{ displayErrorMessage() }}</span>\n </div>\n }\n\n <!-- Order Item & Pricing Summary -->\n <div class=\"mj-widget-summary-card\">\n <div class=\"mj-summary-row\">\n <div class=\"mj-summary-item-info\">\n <span class=\"mj-product-name\">{{ config?.productName || 'Order Item' }}</span>\n @if (isFree()) {\n <span class=\"mj-badge-free\">FREE</span>\n }\n </div>\n <div class=\"mj-summary-price\">\n @if (isFree()) {\n <span class=\"mj-price-free\">$0.00</span>\n } @else {\n <span class=\"mj-price-amount\">{{ currencySymbol() }}{{ (config?.unitPrice || 0).toFixed(2) }}</span>\n }\n </div>\n </div>\n\n @if (config?.allowQuantity) {\n <div class=\"mj-quantity-selector-row\">\n <label for=\"quantityInput\" class=\"mj-label\">Quantity</label>\n <div class=\"mj-qty-controls\">\n <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() - 1)\" [disabled]=\"quantity() <= 1\">-</button>\n <input id=\"quantityInput\" type=\"number\" class=\"mj-qty-input\" [ngModel]=\"quantity()\" (ngModelChange)=\"onQuantityChange($event)\" min=\"1\" [max]=\"config?.maxQuantity || 50\" />\n <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() + 1)\" [disabled]=\"quantity() >= (config?.maxQuantity || 50)\">+</button>\n </div>\n </div>\n }\n </div>\n\n <!-- Registration / Contact / Product Extension Form Section -->\n <section class=\"mj-widget-form-section\">\n @if (isSingleUnit()) {\n <!-- Single Unit / Primary Form -->\n <h3 class=\"mj-section-title\">Details</h3>\n <div class=\"mj-form-grid\">\n @for (field of activeFieldDefs(); track field.name) {\n <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n <label class=\"mj-label\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n\n @switch (field.type) {\n @case ('textarea') {\n <textarea\n class=\"mj-input mj-textarea\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\">\n </textarea>\n }\n @case ('select') {\n <select\n class=\"mj-select\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [required]=\"field.required || false\">\n <option [ngValue]=\"''\">Select {{ field.label }}</option>\n @for (opt of field.options; track opt.value) {\n <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n }\n @case ('boolean') {\n <label class=\"mj-checkbox-label\">\n <input\n type=\"checkbox\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\" />\n <span>{{ field.label }}</span>\n </label>\n }\n @case ('number') {\n <input\n type=\"number\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n @case ('date') {\n <input\n type=\"date\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [required]=\"field.required || false\" />\n }\n @default {\n <input\n [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n }\n </div>\n }\n </div>\n } @else {\n <!-- Multi-Unit Matrix (Repeating Fieldsets for Quantity > 1) -->\n <div class=\"mj-multi-attendee-header\">\n <h3 class=\"mj-section-title\">Item Details ({{ quantity() }})</h3>\n <button type=\"button\" class=\"mj-btn-link\" (click)=\"copyPrimaryToAll()\">Copy Primary Info to All</button>\n </div>\n\n <div class=\"mj-attendee-matrix\">\n @for (unit of units(); track $index) {\n <div class=\"mj-attendee-card\">\n <div class=\"mj-attendee-card-title\">Item {{ $index + 1 }}</div>\n <div class=\"mj-form-grid\">\n @for (field of activeFieldDefs(); track field.name) {\n <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n <label class=\"mj-label\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n\n @switch (field.type) {\n @case ('textarea') {\n <textarea\n class=\"mj-input mj-textarea\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\">\n </textarea>\n }\n @case ('select') {\n <select\n class=\"mj-select\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [required]=\"field.required || false\">\n <option [ngValue]=\"''\">Select {{ field.label }}</option>\n @for (opt of field.options; track opt.value) {\n <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n }\n @case ('boolean') {\n <label class=\"mj-checkbox-label\">\n <input\n type=\"checkbox\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\" />\n <span>{{ field.label }}</span>\n </label>\n }\n @case ('number') {\n <input\n type=\"number\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n @case ('date') {\n <input\n type=\"date\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [required]=\"field.required || false\" />\n }\n @default {\n <input\n [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </section>\n\n <!-- Billing Location \u2014 required so the sale can be placed in a tax jurisdiction -->\n <section class=\"mj-widget-form-section\">\n <h3 class=\"mj-section-title\">Billing Location</h3>\n <div class=\"mj-form-grid\">\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-country'\">\n Country <span class=\"mj-required\">*</span>\n </label>\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-billing-country'\"\n autocomplete=\"country\"\n [ngModel]=\"billingCountry()\"\n (ngModelChange)=\"onBillingCountryChange($event)\"\n required>\n <option [ngValue]=\"''\">Select country</option>\n @for (c of billingCountries; track c.Code) {\n <option [ngValue]=\"c.Code\">{{ c.Name }}</option>\n }\n </select>\n </div>\n @if (billingRegions().length > 0) {\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-region'\">\n State / Province <span class=\"mj-required\">*</span>\n </label>\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-billing-region'\"\n autocomplete=\"address-level1\"\n [ngModel]=\"billingRegion()\"\n (ngModelChange)=\"onBillingRegionChange($event)\"\n required>\n <option [ngValue]=\"''\">Select state or province</option>\n @for (r of billingRegions(); track r.Code) {\n <option [ngValue]=\"r.Code\">{{ r.Name }}</option>\n }\n </select>\n </div>\n }\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-postal'\">\n Postal Code\n @if (billingPostalRequired()) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n <input\n type=\"text\"\n class=\"mj-input\"\n [id]=\"widgetInstanceId + '-billing-postal'\"\n autocomplete=\"postal-code\"\n maxlength=\"20\"\n [ngModel]=\"billingPostalCode()\"\n (ngModelChange)=\"onBillingPostalCodeChange($event)\"\n [required]=\"billingPostalRequired()\" />\n </div>\n </div>\n </section>\n <!-- Questions from the widget's Configuration; answers are recorded on the order -->\n @if (questions().length > 0) {\n <section class=\"mj-widget-form-section\">\n <h3 class=\"mj-section-title\">A few questions</h3>\n <div class=\"mj-form-grid\">\n @for (question of questions(); track question.key) {\n <div class=\"mj-form-group full-width\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-q-' + question.key\">\n {{ question.label }}\n @if (question.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n @if (question.type === 'select') {\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-q-' + question.key\"\n [ngModel]=\"answerFor(question.key).Value ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n [required]=\"question.required || false\">\n <option [ngValue]=\"''\">Select an answer</option>\n @for (opt of question.options; track optionValue(opt)) {\n <option [ngValue]=\"optionValue(opt)\">{{ optionLabel(opt) }}</option>\n }\n </select>\n @if (isOtherChosen(question)) {\n <input\n type=\"text\"\n class=\"mj-input mj-question-other\"\n [attr.aria-label]=\"question.label + ' (please specify)'\"\n placeholder=\"Please specify\"\n [attr.maxlength]=\"answerMaxLength(question)\"\n [ngModel]=\"answerFor(question.key).OtherText ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { OtherText: $event })\"\n required />\n }\n } @else {\n <input\n type=\"text\"\n class=\"mj-input\"\n [id]=\"widgetInstanceId + '-q-' + question.key\"\n [attr.maxlength]=\"answerMaxLength(question)\"\n [ngModel]=\"answerFor(question.key).Value ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n [required]=\"question.required || false\" />\n }\n </div>\n }\n </div>\n </section>\n }\n\n <!-- Choice groups from the widget's Configuration; the picks are recorded on the order line -->\n @for (group of choiceGroups(); track group.key) {\n <section class=\"mj-widget-form-section\">\n <fieldset class=\"mj-choice-group\">\n <legend class=\"mj-section-title\">\n {{ group.label }}\n <span class=\"mj-choice-count\">(choose {{ choiceCount(group) }})</span>\n @if (group.min > 0) {\n <span class=\"mj-required\">*</span>\n }\n </legend>\n <div class=\"mj-choice-options\">\n @for (opt of group.options; track choiceValue(opt)) {\n <label\n class=\"mj-checkbox-label\"\n [class.is-disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\">\n <input\n type=\"checkbox\"\n [checked]=\"isChosen(group.key, choiceValue(opt))\"\n [disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\"\n (change)=\"toggleChoice(group, choiceValue(opt))\" />\n <span>{{ choiceLabel(opt) }}</span>\n </label>\n }\n </div>\n </fieldset>\n </section>\n }\n\n <!-- Stripe Embedded Payment Section -->\n @if (!isFree()) {\n <section class=\"mj-widget-payment-section\">\n <h3 class=\"mj-section-title\">Payment</h3>\n <div class=\"mj-stripe-container\">\n <div id=\"stripe-card-element\" class=\"mj-stripe-mount-point\">\n <!-- Stripe.js mounts secure hosted Elements iframe here -->\n </div>\n <div class=\"mj-stripe-badge\">\n <span class=\"mj-stripe-lock-icon\">\uD83D\uDD12</span>\n <span>Secured by Stripe \u2022 PCI-DSS Level 1 Certified \u2022 End-to-end Encrypted</span>\n </div>\n </div>\n </section>\n\n @if (allowsPromotionCodes()) {\n <div class=\"mj-checkout-promo\">\n <label class=\"mj-checkout-promo__label\" for=\"{{ widgetInstanceId }}-promo\">Promo code</label>\n <div class=\"mj-checkout-promo__row\">\n <input id=\"{{ widgetInstanceId }}-promo\" type=\"text\" class=\"mj-input mj-checkout-promo__input\" autocomplete=\"off\" maxlength=\"60\"\n [value]=\"promotionCodeInput()\"\n (input)=\"promotionCodeInput.set($any($event.target).value)\"\n (keydown.enter)=\"applyPromotionCode()\"\n [disabled]=\"isProcessing\" />\n <button type=\"button\" class=\"mj-checkout-promo__apply\"\n [disabled]=\"isProcessing || !promotionCodeInput().trim()\"\n (click)=\"applyPromotionCode()\">Apply</button>\n </div>\n @if (promotionError) {\n <p class=\"mj-checkout-promo__error\" role=\"alert\">{{ promotionError }}</p>\n } @else if (activePromotion(); as promo) {\n <p class=\"mj-checkout-promo__applied\" role=\"status\">\n {{ promo.code }} applied: \u2212{{ currencySymbol() }}{{ promo.discount.toFixed(2) }}\n </p>\n }\n </div>\n }\n\n @if (autoRenewConsentText(); as consentText) {\n <label class=\"mj-checkout-consent\">\n <input type=\"checkbox\"\n [checked]=\"autoRenewConsent()\"\n (change)=\"autoRenewConsent.set($any($event.target).checked)\"\n [disabled]=\"isProcessing\" />\n <span>{{ consentText }}</span>\n </label>\n }\n\n <!-- Final Total Line -->\n @if (quotedTax !== null) {\n <div class=\"mj-checkout-total-row\">\n <span class=\"mj-total-label\">Sales Tax</span>\n <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ (quotedTax ?? 0).toFixed(2) }}</span>\n </div>\n }\n <div class=\"mj-checkout-total-row\">\n <span class=\"mj-total-label\">Total Due</span>\n <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"mj-widget-actions\">\n <button type=\"button\" class=\"mj-btn-submit\" [disabled]=\"!isFormValid() || isProcessing\" (click)=\"handleSubmit()\">\n @if (isProcessing) {\n <span class=\"mj-spinner\"></span>\n <span>Processing...</span>\n } @else if (isFree()) {\n <span>Complete Free Registration</span>\n } @else {\n <span>Pay {{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n }\n </button>\n\n <button type=\"button\" class=\"mj-btn-cancel\" [disabled]=\"isProcessing\" (click)=\"cancelled.emit()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: [":host {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n margin-bottom: 20px;\n}\n\n.mj-widget-title {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width {\n grid-column: 1 / -1;\n}\n\n.mj-label {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required {\n color: #ef4444;\n}\n\n.mj-input, .mj-select {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select {\n min-height: 38px;\n}\n\n.mj-checkbox-label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n color: #334155;\n margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question's \"Other\" choice. */\n.mj-question-other {\n margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n min-height: 40px;\n}\n\n.mj-stripe-badge {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n line-height: 1.4;\n}\n.mj-checkout-consent input {\n margin-top: 0.2rem;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n"] }]
|
|
1360
|
+
args: [{ selector: 'mj-checkout-widget', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-checkout-widget-container\"\n [style.--mj-primary-color]=\"activeTheme()?.primaryColor || '#2563eb'\"\n [style.--mj-accent-color]=\"activeTheme()?.accentColor || '#3b82f6'\"\n [style.--mj-border-radius]=\"activeTheme()?.borderRadius || '8px'\"\n [style.--mj-bg-color]=\"activeTheme()?.backgroundColor || '#ffffff'\"\n [style.--mj-text-color]=\"activeTheme()?.textColor || '#0f172a'\"\n [style.--mj-font-family]=\"activeTheme()?.fontFamily || 'inherit'\">\n\n <!-- Widget Header -->\n <header class=\"mj-widget-header\">\n <h2 class=\"mj-widget-title\">{{ config?.title || 'Checkout' }}</h2>\n @if (config?.description) {\n <p class=\"mj-widget-description\">{{ config?.description }}</p>\n }\n </header>\n\n <!-- Error Banner -->\n @if (displayErrorMessage()) {\n <div class=\"mj-widget-error-banner\" role=\"alert\">\n <span class=\"mj-error-icon\">\u26A0\uFE0F</span>\n <span>{{ displayErrorMessage() }}</span>\n </div>\n }\n\n <!-- Order Item & Pricing Summary -->\n <div class=\"mj-widget-summary-card\">\n <div class=\"mj-summary-row\">\n <div class=\"mj-summary-item-info\">\n <span class=\"mj-product-name\">{{ config?.productName || 'Order Item' }}</span>\n @if (isFree()) {\n <span class=\"mj-badge-free\">FREE</span>\n }\n </div>\n <div class=\"mj-summary-price\">\n @if (isFree()) {\n <span class=\"mj-price-free\">$0.00</span>\n } @else {\n <span class=\"mj-price-amount\">{{ currencySymbol() }}{{ (config?.unitPrice || 0).toFixed(2) }}</span>\n }\n </div>\n </div>\n\n @if (config?.allowQuantity) {\n <div class=\"mj-quantity-selector-row\">\n <label for=\"quantityInput\" class=\"mj-label\">Quantity</label>\n <div class=\"mj-qty-controls\">\n <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() - 1)\" [disabled]=\"quantity() <= 1\">-</button>\n <input id=\"quantityInput\" type=\"number\" class=\"mj-qty-input\" [ngModel]=\"quantity()\" (ngModelChange)=\"onQuantityChange($event)\" min=\"1\" [max]=\"config?.maxQuantity || 50\" />\n <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() + 1)\" [disabled]=\"quantity() >= (config?.maxQuantity || 50)\">+</button>\n </div>\n </div>\n }\n </div>\n\n <!-- Registration / Contact / Product Extension Form Section -->\n <section class=\"mj-widget-form-section\">\n @if (isSingleUnit()) {\n <!-- Single Unit / Primary Form -->\n <h3 class=\"mj-section-title\">Details</h3>\n <div class=\"mj-form-grid\">\n @for (field of activeFieldDefs(); track field.name) {\n <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n <label class=\"mj-label\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n\n @switch (field.type) {\n @case ('textarea') {\n <textarea\n class=\"mj-input mj-textarea\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\">\n </textarea>\n }\n @case ('select') {\n <select\n class=\"mj-select\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [required]=\"field.required || false\">\n <option [ngValue]=\"''\">Select {{ field.label }}</option>\n @for (opt of field.options; track opt.value) {\n <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n }\n @case ('boolean') {\n <label class=\"mj-checkbox-label\">\n <input\n type=\"checkbox\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\" />\n <span>{{ field.label }}</span>\n </label>\n }\n @case ('number') {\n <input\n type=\"number\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n @case ('date') {\n <input\n type=\"date\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [required]=\"field.required || false\" />\n }\n @default {\n <input\n [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n class=\"mj-input\"\n [ngModel]=\"units()[0]?.[field.name]\"\n (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n }\n </div>\n }\n </div>\n } @else {\n <!-- Multi-Unit Matrix (Repeating Fieldsets for Quantity > 1) -->\n <div class=\"mj-multi-attendee-header\">\n <h3 class=\"mj-section-title\">Item Details ({{ quantity() }})</h3>\n <button type=\"button\" class=\"mj-btn-link\" (click)=\"copyPrimaryToAll()\">Copy Primary Info to All</button>\n </div>\n\n <div class=\"mj-attendee-matrix\">\n @for (unit of units(); track $index) {\n <div class=\"mj-attendee-card\">\n <div class=\"mj-attendee-card-title\">Item {{ $index + 1 }}</div>\n <div class=\"mj-form-grid\">\n @for (field of activeFieldDefs(); track field.name) {\n <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n <label class=\"mj-label\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n\n @switch (field.type) {\n @case ('textarea') {\n <textarea\n class=\"mj-input mj-textarea\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\">\n </textarea>\n }\n @case ('select') {\n <select\n class=\"mj-select\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [required]=\"field.required || false\">\n <option [ngValue]=\"''\">Select {{ field.label }}</option>\n @for (opt of field.options; track opt.value) {\n <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n }\n </select>\n }\n @case ('boolean') {\n <label class=\"mj-checkbox-label\">\n <input\n type=\"checkbox\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\" />\n <span>{{ field.label }}</span>\n </label>\n }\n @case ('number') {\n <input\n type=\"number\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n @case ('date') {\n <input\n type=\"date\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [required]=\"field.required || false\" />\n }\n @default {\n <input\n [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n class=\"mj-input\"\n [ngModel]=\"unit[field.name]\"\n (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n [placeholder]=\"field.placeholder || ''\"\n [required]=\"field.required || false\" />\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </section>\n\n <!-- Billing Location \u2014 required so the sale can be placed in a tax jurisdiction -->\n <section class=\"mj-widget-form-section\">\n <h3 class=\"mj-section-title\">Billing Location</h3>\n <div class=\"mj-form-grid\">\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-country'\">\n Country <span class=\"mj-required\">*</span>\n </label>\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-billing-country'\"\n autocomplete=\"country\"\n [ngModel]=\"billingCountry()\"\n (ngModelChange)=\"onBillingCountryChange($event)\"\n required>\n <option [ngValue]=\"''\">Select country</option>\n @for (c of billingCountries; track c.Code) {\n <option [ngValue]=\"c.Code\">{{ c.Name }}</option>\n }\n </select>\n </div>\n @if (billingRegions().length > 0) {\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-region'\">\n State / Province <span class=\"mj-required\">*</span>\n </label>\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-billing-region'\"\n autocomplete=\"address-level1\"\n [ngModel]=\"billingRegion()\"\n (ngModelChange)=\"onBillingRegionChange($event)\"\n required>\n <option [ngValue]=\"''\">Select state or province</option>\n @for (r of billingRegions(); track r.Code) {\n <option [ngValue]=\"r.Code\">{{ r.Name }}</option>\n }\n </select>\n </div>\n }\n <div class=\"mj-form-group\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-postal'\">\n Postal Code\n @if (billingPostalRequired()) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n <input\n type=\"text\"\n class=\"mj-input\"\n [id]=\"widgetInstanceId + '-billing-postal'\"\n autocomplete=\"postal-code\"\n maxlength=\"20\"\n [ngModel]=\"billingPostalCode()\"\n (ngModelChange)=\"onBillingPostalCodeChange($event)\"\n [required]=\"billingPostalRequired()\" />\n </div>\n </div>\n </section>\n <!-- Questions from the widget's Configuration; answers are recorded on the order -->\n @if (questions().length > 0) {\n <section class=\"mj-widget-form-section\">\n <h3 class=\"mj-section-title\">A few questions</h3>\n <div class=\"mj-form-grid\">\n @for (question of questions(); track question.key) {\n <div class=\"mj-form-group full-width\">\n <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-q-' + question.key\">\n {{ question.label }}\n @if (question.required) {\n <span class=\"mj-required\">*</span>\n }\n </label>\n @if (question.type === 'select') {\n <select\n class=\"mj-select\"\n [id]=\"widgetInstanceId + '-q-' + question.key\"\n [ngModel]=\"answerFor(question.key).Value ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n [required]=\"question.required || false\">\n <option [ngValue]=\"''\">Select an answer</option>\n @for (opt of question.options; track optionValue(opt)) {\n <option [ngValue]=\"optionValue(opt)\">{{ optionLabel(opt) }}</option>\n }\n </select>\n @if (isOtherChosen(question)) {\n <input\n type=\"text\"\n class=\"mj-input mj-question-other\"\n [attr.aria-label]=\"question.label + ' (please specify)'\"\n placeholder=\"Please specify\"\n [attr.maxlength]=\"answerMaxLength(question)\"\n [ngModel]=\"answerFor(question.key).OtherText ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { OtherText: $event })\"\n required />\n }\n } @else {\n <input\n type=\"text\"\n class=\"mj-input\"\n [id]=\"widgetInstanceId + '-q-' + question.key\"\n [attr.maxlength]=\"answerMaxLength(question)\"\n [ngModel]=\"answerFor(question.key).Value ?? ''\"\n (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n [required]=\"question.required || false\" />\n }\n </div>\n }\n </div>\n </section>\n }\n\n <!-- Choice groups from the widget's Configuration; the picks are recorded on the order line -->\n @for (group of choiceGroups(); track group.key) {\n <section class=\"mj-widget-form-section\">\n <fieldset class=\"mj-choice-group\">\n <legend class=\"mj-section-title\">\n {{ group.label }}\n <span class=\"mj-choice-count\">(choose {{ choiceCount(group) }})</span>\n @if (group.min > 0) {\n <span class=\"mj-required\">*</span>\n }\n </legend>\n <div class=\"mj-choice-options\">\n @for (opt of group.options; track choiceValue(opt)) {\n <label\n class=\"mj-checkbox-label\"\n [class.is-disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\">\n <input\n type=\"checkbox\"\n [checked]=\"isChosen(group.key, choiceValue(opt))\"\n [disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\"\n (change)=\"toggleChoice(group, choiceValue(opt))\" />\n <span>{{ choiceLabel(opt) }}</span>\n </label>\n }\n </div>\n </fieldset>\n </section>\n }\n\n <!-- Stripe Embedded Payment Section -->\n @if (!isFree()) {\n <section class=\"mj-widget-payment-section\">\n <h3 class=\"mj-section-title\">Payment</h3>\n <div class=\"mj-stripe-container\">\n <div id=\"stripe-card-element\" class=\"mj-stripe-mount-point\">\n <!-- Stripe.js mounts secure hosted Elements iframe here -->\n </div>\n <div class=\"mj-stripe-badge\">\n <span class=\"mj-stripe-lock-icon\">\uD83D\uDD12</span>\n <span>Secured by Stripe \u2022 PCI-DSS Level 1 Certified \u2022 End-to-end Encrypted</span>\n </div>\n </div>\n </section>\n\n @if (allowsPromotionCodes()) {\n <div class=\"mj-checkout-promo\">\n <label class=\"mj-checkout-promo__label\" for=\"{{ widgetInstanceId }}-promo\">Promo code</label>\n <div class=\"mj-checkout-promo__row\">\n <input id=\"{{ widgetInstanceId }}-promo\" type=\"text\" class=\"mj-input mj-checkout-promo__input\" autocomplete=\"off\" maxlength=\"60\"\n [value]=\"promotionCodeInput()\"\n (input)=\"promotionCodeInput.set($any($event.target).value)\"\n (keydown.enter)=\"applyPromotionCode()\"\n [disabled]=\"isProcessing\" />\n <button type=\"button\" class=\"mj-checkout-promo__apply\"\n [disabled]=\"isProcessing || !promotionCodeInput().trim()\"\n (click)=\"applyPromotionCode()\">Apply</button>\n </div>\n @if (promotionError) {\n <p class=\"mj-checkout-promo__error\" role=\"alert\">{{ promotionError }}</p>\n } @else if (activePromotion(); as promo) {\n <p class=\"mj-checkout-promo__applied\" role=\"status\">\n {{ promo.code }} applied: \u2212{{ currencySymbol() }}{{ promo.discount.toFixed(2) }}\n </p>\n }\n </div>\n }\n\n @if (autoRenewConsentText(); as consentText) {\n <label class=\"mj-checkout-consent\">\n <input type=\"checkbox\"\n [checked]=\"autoRenewConsent()\"\n (change)=\"autoRenewConsent.set($any($event.target).checked)\"\n [disabled]=\"isProcessing\" />\n <span>{{ consentText }}</span>\n </label>\n }\n\n <!-- Final Total Line -->\n @if (quotedTax !== null) {\n <div class=\"mj-checkout-total-row\">\n <span class=\"mj-total-label\">Sales Tax</span>\n <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ (quotedTax ?? 0).toFixed(2) }}</span>\n </div>\n }\n <div class=\"mj-checkout-total-row\">\n <span class=\"mj-total-label\">Total Due</span>\n <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"mj-widget-actions\">\n <button type=\"button\" class=\"mj-btn-submit\" [disabled]=\"!isFormValid() || isProcessing\" (click)=\"handleSubmit()\">\n @if (isProcessing) {\n <span class=\"mj-spinner\"></span>\n <span>Processing...</span>\n } @else if (isFree()) {\n <span>Complete Free Registration</span>\n } @else {\n <span>Pay {{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n }\n </button>\n\n <button type=\"button\" class=\"mj-btn-cancel\" [disabled]=\"isProcessing\" (click)=\"cancelled.emit()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: [":host {\n display: block;\n font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n max-width: 560px;\n margin: 0 auto;\n background: var(--mj-bg-color, #ffffff);\n border: 1px solid #e2e8f0;\n border-radius: var(--mj-border-radius, 8px);\n padding: 24px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n margin-bottom: 20px;\n}\n\n.mj-widget-title {\n margin: 0 0 6px 0;\n font-size: 1.35rem;\n font-weight: 700;\n color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n margin: 0;\n font-size: 0.9rem;\n color: #64748b;\n line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #fef2f2;\n border: 1px solid #f87171;\n color: #991b1b;\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 18px;\n font-size: 0.875rem;\n}\n\n.mj-error-icon {\n font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px 16px;\n margin-bottom: 20px;\n}\n\n.mj-summary-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.mj-summary-price {\n display: flex;\n align-items: center;\n}\n\n.mj-widget-form-section {\n margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-product-name {\n font-weight: 600;\n font-size: 1rem;\n color: #1e293b;\n}\n\n.mj-badge-free {\n background: #dcfce7;\n color: #166534;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 6px;\n border-radius: 4px;\n}\n\n.mj-price-free {\n font-weight: 700;\n color: #166534;\n font-size: 1.1rem;\n}\n\n.mj-price-amount {\n font-weight: 700;\n color: #0f172a;\n font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-qty-btn {\n width: 28px;\n height: 28px;\n background: #ffffff;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-qty-input {\n width: 44px;\n height: 28px;\n text-align: center;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n font-weight: 600;\n}\n\n.mj-section-title {\n font-size: 1rem;\n font-weight: 600;\n margin: 0 0 12px 0;\n color: #334155;\n}\n\n.mj-form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 18px;\n}\n\n.mj-form-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.mj-form-group.full-width {\n grid-column: 1 / -1;\n}\n\n.mj-label {\n font-size: 0.8rem;\n font-weight: 500;\n color: #475569;\n}\n\n.mj-required {\n color: #ef4444;\n}\n\n.mj-input, .mj-select {\n padding: 8px 12px;\n font-size: 0.9rem;\n border: 1px solid #cbd5e1;\n border-radius: 4px;\n background: #ffffff;\n color: #1e293b;\n outline: none;\n transition: border-color 0.15s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.mj-textarea {\n min-height: 70px;\n resize: vertical;\n font-family: inherit;\n}\n\n.mj-select {\n min-height: 38px;\n}\n\n.mj-checkbox-label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 400;\n color: #334155;\n margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question's \"Other\" choice. */\n.mj-question-other {\n margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\n.mj-choice-count {\n font-weight: normal;\n color: #64748b;\n}\n\n.mj-choice-options {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n border-color: var(--mj-primary-color, #2563eb);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.mj-btn-link {\n background: none;\n border: none;\n color: var(--mj-primary-color, #2563eb);\n font-size: 0.8rem;\n cursor: pointer;\n text-decoration: underline;\n padding: 0;\n}\n\n.mj-attendee-matrix {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n font-size: 0.85rem;\n font-weight: 600;\n color: #475569;\n margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n padding: 14px;\n margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n min-height: 40px;\n}\n\n.mj-stripe-badge {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 10px;\n font-size: 0.75rem;\n color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #e2e8f0;\n margin-top: 10px;\n margin-bottom: 18px;\n}\n\n.mj-total-label {\n font-weight: 700;\n font-size: 1.05rem;\n color: #0f172a;\n}\n\n.mj-total-amount {\n font-weight: 800;\n font-size: 1.25rem;\n color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n margin-top: 12px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.mj-btn-submit {\n width: 100%;\n padding: 12px;\n background: var(--mj-primary-color, #2563eb);\n color: #ffffff;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-border-radius, 8px);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n width: 100%;\n padding: 8px 12px;\n background: transparent;\n color: #64748b;\n font-size: 0.875rem;\n font-weight: 500;\n border: none;\n cursor: pointer;\n text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n color: #334155;\n text-decoration: underline;\n}\n\n.mj-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid #ffffff;\n border-top-color: transparent;\n border-radius: 50%;\n animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n display: flex;\n gap: 0.5rem;\n align-items: flex-start;\n margin: 0.75rem 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n}\n.mj-checkout-consent input {\n margin-top: 0.2rem;\n}\n\n/* Checkboxes keep their native size even when the host page styles every input\n (e.g. `input { width: 100% }`): this rule is scoped to the widget, so it outranks\n a plain element or class selector on the host page. */\n.mj-checkbox-label input[type=checkbox],\n.mj-checkout-consent input[type=checkbox] {\n width: auto;\n height: auto;\n padding: 0;\n border: 0;\n flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n display: block;\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n display: flex;\n gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n color: var(--mj-error-color, #b91c1c);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n color: var(--mj-success-color, #15803d);\n font-size: 0.875rem;\n margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n flex: 0 0 auto;\n padding: 8px 14px;\n background: transparent;\n color: var(--mj-primary-color, #2563eb);\n border: 1px solid var(--mj-border-color, #cbd5e1);\n border-radius: var(--mj-border-radius, 8px);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n"] }]
|
|
1361
1361
|
}], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], { config: [{
|
|
1362
1362
|
type: Input
|
|
1363
1363
|
}], distributionSlug: [{
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mj-biz-apps/orders-ng",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.34.
|
|
4
|
+
"version": "5.34.1",
|
|
5
5
|
"description": "BizApps Orders Angular bootstrap - generated form components and module for the unified order-management Open App",
|
|
6
6
|
"main": "dist/public-api.js",
|
|
7
7
|
"types": "dist/public-api.d.ts",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"author": "MemberJunction.com",
|
|
16
16
|
"license": "BUSL-1.1",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@mj-biz-apps/orders-entities": "^5.34.
|
|
18
|
+
"@mj-biz-apps/orders-entities": "^5.34.1",
|
|
19
19
|
"ag-grid-angular": "^35.0.1",
|
|
20
20
|
"ag-grid-community": "^35.0.1"
|
|
21
21
|
},
|