@primer-io/primer-js 0.3.8 → 0.3.9
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.
- package/CHANGELOG.md +6 -0
- package/dist/custom-elements.json +67 -11
- package/dist/primer-loader.d.ts +4 -2
- package/dist/primer-loader.js +9 -9
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
"kind": "variable",
|
|
131
|
-
"name": "
|
|
131
|
+
"name": "Fe",
|
|
132
132
|
"default": "class extends g{constructor(){super(...arguments);this.for=\"\";this.active=!0}render(){return m`<span class=\"error\" role=\"alert\" aria-live=\"polite\" id=\"${this.for||\"\"}\" ><slot></slot></span>`}}"
|
|
133
133
|
},
|
|
134
134
|
{
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
140
|
"kind": "variable",
|
|
141
|
-
"name": "
|
|
141
|
+
"name": "ze",
|
|
142
142
|
"default": "class extends g{constructor(){super(...arguments);this.type=\"complete\"}render(){return this.type===\"complete\"?m`<primer-icon size=\"lg\" name=\"successful-check\" color=\"var(--primer-color-icon-positive)\" ></primer-icon><p>Checkout complete!</p><p class=\"secondary\"> You'll be redirected to the order confirmation page soon. </p>`:m`<primer-icon size=\"lg\" name=\"failure-icon\" color=\"var(--primer-color-icon-negative)\" ></primer-icon><p>Payment failed</p>${this.description?m`<p class=\"secondary\">${this.description}</p>`:m`<p class=\"secondary\">Something went wrong.</p>`} `}}"
|
|
143
143
|
},
|
|
144
144
|
{
|
|
@@ -244,7 +244,7 @@
|
|
|
244
244
|
{
|
|
245
245
|
"kind": "variable",
|
|
246
246
|
"name": "ee",
|
|
247
|
-
"default": "class extends g{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new
|
|
247
|
+
"default": "class extends g{constructor(){super(...arguments);this.hideLabels=!1;this.disabled=!1;this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentMethodSelectionSent=!1;this.paymentManagers=new Map;this.clientOptions=null;this.headlessUtils=null;this.analyticsUtils=null;this.contextEventsController=null;this.cardFormProvider=new z(this,{context:Rt,initialValue:null});this.eventsController=new Pt(this);this._contextCardSubmitListener=null;this._isHandlingContextEvent=!1;this.inputControllers=new Map;this.setupCardFormTask=new D(this,{task:([e])=>{if(!e?.manager)return L;let{manager:r}=e,o=r.createHostedInputs(),{cardNumberInput:a,expiryInput:n,cvvInput:l}=o;return this.cardFormProvider.setValue({cardholderNameInput:o.cardholderNameInput,cardNumberInput:a,expiryInput:n,cvvInput:l,setCardholderName:s=>{r.setCardholderName(s),this.shouldRequireCardholderName&&r.validate?.().then(c=>{let h=c?.validationErrors?.find(E=>E.name===es.cardholderName),b=this.inputControllers.get(\"cardholderName\");b&&b.updateMetaFromValidation({valid:!1,error:h?.message||h?.error||null,errorCode:h?.message||h?.error||null})})},setCardNetwork:s=>{this.selectedCardNetwork=s},validate:()=>r.validate(),submit:s=>r.submit(s),hideLabels:this.hideLabels,disabled:this.disabled,setSubmissionState:s=>{this.inputControllers.forEach(c=>{c.setSubmitted(s)})},propagateValidationErrors:s=>{s&&s.forEach(c=>{let u=c.field||c.name,h=c.message||c.error,b=es[u];if(b){let E=this.inputControllers.get(b);if(E){let A={valid:!1,error:h,errorCode:h};E.updateMetaFromValidation(A)}}})},registerInputController:(s,c)=>{this.inputControllers.set(s,c)},unregisterInputController:s=>{this.inputControllers.delete(s)},onUserInteraction:()=>{this.sendPaymentMethodSelectionEvent(),this.checkAndSendPaymentDetailsEnteredEvent()}}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.paymentDetailsEnteredSent=!1;this.handleSlotButtonClick=e=>{let o=e.target.closest(\"button, primer-button\");if(!o)return;let a=o;this.isSubmitButton(a)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.handleContextCardSubmit=e=>{if(!this._isHandlingContextEvent){this._isHandlingContextEvent=!0;try{e.target!==this&&(e.stopPropagation(),this.submitCardPayment())}finally{this._isHandlingContextEvent=!1}}};this.onSlotChange=e=>{let o=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=o.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}updated(e){if(super.updated(e),(e.has(\"hideLabels\")||e.has(\"disabled\"))&&this.cardFormProvider.value&&this.cardFormProvider.setValue({...this.cardFormProvider.value,hideLabels:this.hideLabels,disabled:this.disabled}),e.has(\"contextEventsController\")){let r=e.get(\"contextEventsController\");r?.host&&this._contextCardSubmitListener&&r.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener),this.setupContextEventListeners()}}get shouldShowCardholderName(){let e=this.clientOptions?.card?.cardholderName;return typeof e?.visible==\"boolean\"?e.visible:!0}get shouldRequireCardholderName(){if(!this.shouldShowCardholderName)return!1;let e=this.clientOptions?.card?.cardholderName;return typeof e?.required==\"boolean\"?e.required:!0}sendPaymentMethodSelectionEvent(){this.paymentMethodSelectionSent||(this.paymentMethodSelectionSent=!0,G({eventName:\"PAYMENT_METHOD_SELECTION\",paymentMethod:\"PAYMENT_CARD\"}))}checkAndSendPaymentDetailsEnteredEvent(){if(this.paymentDetailsEnteredSent)return;let e=this.inputControllers.get(\"cardNumber\"),r=this.inputControllers.get(\"expire\"),o=this.inputControllers.get(\"cvv\"),a=e?.meta?.dirty===!0,n=r?.meta?.dirty===!0,l=o?.meta?.dirty===!0,s=!0;this.shouldRequireCardholderName&&(s=this.inputControllers.get(\"cardholderName\")?.meta?.dirty===!0),a&&n&&l&&s&&(this.sendPaymentDetailsEnteredEvent(),this.paymentDetailsEnteredSent=!0)}sendPaymentDetailsEnteredEvent(){G({eventName:\"PAYMENT_DETAILS_ENTERED\",paymentMethod:\"PAYMENT_CARD\"})}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer:card-submit\",this.handleDirectSubmit),this._contextCardSubmitListener=e=>{this.handleContextCardSubmit(e)},this.setupContextEventListeners()}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer:card-submit\",this.handleDirectSubmit),this.cleanupContextEventListeners(),super.disconnectedCallback()}setupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.addEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}cleanupContextEventListeners(){this.contextEventsController?.host&&this._contextCardSubmitListener&&this.contextEventsController.host.removeEventListener(\"primer:card-submit\",this._contextCardSubmitListener)}isSubmitButton(e){let r=e.tagName.toLowerCase(),o=r===\"button\",a=r===\"primer-button\";return o&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||a&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e||this.disabled)return;e.setSubmissionState?.(!0);let r=await e.validate?.();if(r?.valid){let o=this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0;await e.submit?.(o);let a={success:!0};this.eventsController.dispatchFormSubmitSuccess(a)}else{let o=r?.validationErrors;e.propagateValidationErrors?.(o||[]),this.cardFormProvider.setValue({...e,errors:o}),this.eventsController.dispatchFormSubmitErrors(o)}}render(){return this.setupCardFormTask.status===it.ERROR||this.setupCardFormTask.status===it.INITIAL?f:m`<form @submit=${this.handleFormSubmit}><slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot>${this.setupCardFormTask.render({complete:()=>R(this.hasAssignedContent,()=>f,()=>m`<div class=\"card-form\"><primer-input-card-number></primer-input-card-number><div class=\"card-form-row\"><primer-input-card-expiry></primer-input-card-expiry><primer-input-cvv></primer-input-cvv></div>${R(this.shouldShowCardholderName,()=>m`<primer-input-card-holder-name></primer-input-card-holder-name>`,()=>f)}</div><primer-card-form-submit></primer-card-form-submit>`)})}</form>`}}"
|
|
248
248
|
},
|
|
249
249
|
{
|
|
250
250
|
"kind": "variable",
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
"kind": "js",
|
|
381
381
|
"name": "CardFormError",
|
|
382
382
|
"declaration": {
|
|
383
|
-
"name": "
|
|
383
|
+
"name": "Fe",
|
|
384
384
|
"module": "dist/primer-loader.js"
|
|
385
385
|
}
|
|
386
386
|
},
|
|
@@ -556,7 +556,7 @@
|
|
|
556
556
|
"kind": "js",
|
|
557
557
|
"name": "PrimerCheckoutState",
|
|
558
558
|
"declaration": {
|
|
559
|
-
"name": "
|
|
559
|
+
"name": "ze",
|
|
560
560
|
"module": "dist/primer-loader.js"
|
|
561
561
|
}
|
|
562
562
|
},
|
|
@@ -12270,12 +12270,20 @@
|
|
|
12270
12270
|
"members": [
|
|
12271
12271
|
{
|
|
12272
12272
|
"kind": "field",
|
|
12273
|
-
"name": "
|
|
12273
|
+
"name": "_cardFormContext",
|
|
12274
12274
|
"type": {
|
|
12275
12275
|
"text": "CardFormContext | null"
|
|
12276
12276
|
},
|
|
12277
|
+
"privacy": "private",
|
|
12277
12278
|
"default": "null"
|
|
12278
12279
|
},
|
|
12280
|
+
{
|
|
12281
|
+
"kind": "field",
|
|
12282
|
+
"name": "cardFormContext",
|
|
12283
|
+
"type": {
|
|
12284
|
+
"text": "CardFormContext | null"
|
|
12285
|
+
}
|
|
12286
|
+
},
|
|
12279
12287
|
{
|
|
12280
12288
|
"kind": "field",
|
|
12281
12289
|
"name": "computedStyles",
|
|
@@ -12736,7 +12744,7 @@
|
|
|
12736
12744
|
{
|
|
12737
12745
|
"kind": "method",
|
|
12738
12746
|
"name": "registerWithContext",
|
|
12739
|
-
"privacy": "
|
|
12747
|
+
"privacy": "public",
|
|
12740
12748
|
"return": {
|
|
12741
12749
|
"type": {
|
|
12742
12750
|
"text": "void"
|
|
@@ -13845,16 +13853,28 @@
|
|
|
13845
13853
|
},
|
|
13846
13854
|
{
|
|
13847
13855
|
"kind": "field",
|
|
13848
|
-
"name": "
|
|
13856
|
+
"name": "_cardFormContext",
|
|
13849
13857
|
"type": {
|
|
13850
13858
|
"text": "CardFormContext | null"
|
|
13851
13859
|
},
|
|
13860
|
+
"privacy": "private",
|
|
13852
13861
|
"default": "null",
|
|
13853
13862
|
"inheritedFrom": {
|
|
13854
13863
|
"name": "AbstractCardInputComponent",
|
|
13855
13864
|
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
13856
13865
|
}
|
|
13857
13866
|
},
|
|
13867
|
+
{
|
|
13868
|
+
"kind": "field",
|
|
13869
|
+
"name": "cardFormContext",
|
|
13870
|
+
"type": {
|
|
13871
|
+
"text": "CardFormContext | null"
|
|
13872
|
+
},
|
|
13873
|
+
"inheritedFrom": {
|
|
13874
|
+
"name": "AbstractCardInputComponent",
|
|
13875
|
+
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
13876
|
+
}
|
|
13877
|
+
},
|
|
13858
13878
|
{
|
|
13859
13879
|
"kind": "field",
|
|
13860
13880
|
"name": "computedStyles",
|
|
@@ -14197,16 +14217,28 @@
|
|
|
14197
14217
|
},
|
|
14198
14218
|
{
|
|
14199
14219
|
"kind": "field",
|
|
14200
|
-
"name": "
|
|
14220
|
+
"name": "_cardFormContext",
|
|
14201
14221
|
"type": {
|
|
14202
14222
|
"text": "CardFormContext | null"
|
|
14203
14223
|
},
|
|
14224
|
+
"privacy": "private",
|
|
14204
14225
|
"default": "null",
|
|
14205
14226
|
"inheritedFrom": {
|
|
14206
14227
|
"name": "AbstractCardInputComponent",
|
|
14207
14228
|
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14208
14229
|
}
|
|
14209
14230
|
},
|
|
14231
|
+
{
|
|
14232
|
+
"kind": "field",
|
|
14233
|
+
"name": "cardFormContext",
|
|
14234
|
+
"type": {
|
|
14235
|
+
"text": "CardFormContext | null"
|
|
14236
|
+
},
|
|
14237
|
+
"inheritedFrom": {
|
|
14238
|
+
"name": "AbstractCardInputComponent",
|
|
14239
|
+
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14240
|
+
}
|
|
14241
|
+
},
|
|
14210
14242
|
{
|
|
14211
14243
|
"kind": "field",
|
|
14212
14244
|
"name": "computedStyles",
|
|
@@ -14547,16 +14579,28 @@
|
|
|
14547
14579
|
},
|
|
14548
14580
|
{
|
|
14549
14581
|
"kind": "field",
|
|
14550
|
-
"name": "
|
|
14582
|
+
"name": "_cardFormContext",
|
|
14551
14583
|
"type": {
|
|
14552
14584
|
"text": "CardFormContext | null"
|
|
14553
14585
|
},
|
|
14586
|
+
"privacy": "private",
|
|
14554
14587
|
"default": "null",
|
|
14555
14588
|
"inheritedFrom": {
|
|
14556
14589
|
"name": "AbstractCardInputComponent",
|
|
14557
14590
|
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14558
14591
|
}
|
|
14559
14592
|
},
|
|
14593
|
+
{
|
|
14594
|
+
"kind": "field",
|
|
14595
|
+
"name": "cardFormContext",
|
|
14596
|
+
"type": {
|
|
14597
|
+
"text": "CardFormContext | null"
|
|
14598
|
+
},
|
|
14599
|
+
"inheritedFrom": {
|
|
14600
|
+
"name": "AbstractCardInputComponent",
|
|
14601
|
+
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14602
|
+
}
|
|
14603
|
+
},
|
|
14560
14604
|
{
|
|
14561
14605
|
"kind": "field",
|
|
14562
14606
|
"name": "computedStyles",
|
|
@@ -14871,16 +14915,28 @@
|
|
|
14871
14915
|
},
|
|
14872
14916
|
{
|
|
14873
14917
|
"kind": "field",
|
|
14874
|
-
"name": "
|
|
14918
|
+
"name": "_cardFormContext",
|
|
14875
14919
|
"type": {
|
|
14876
14920
|
"text": "CardFormContext | null"
|
|
14877
14921
|
},
|
|
14922
|
+
"privacy": "private",
|
|
14878
14923
|
"default": "null",
|
|
14879
14924
|
"inheritedFrom": {
|
|
14880
14925
|
"name": "AbstractCardInputComponent",
|
|
14881
14926
|
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14882
14927
|
}
|
|
14883
14928
|
},
|
|
14929
|
+
{
|
|
14930
|
+
"kind": "field",
|
|
14931
|
+
"name": "cardFormContext",
|
|
14932
|
+
"type": {
|
|
14933
|
+
"text": "CardFormContext | null"
|
|
14934
|
+
},
|
|
14935
|
+
"inheritedFrom": {
|
|
14936
|
+
"name": "AbstractCardInputComponent",
|
|
14937
|
+
"module": "src/containers/card-form/components/abstract-card-input-component.ts"
|
|
14938
|
+
}
|
|
14939
|
+
},
|
|
14884
14940
|
{
|
|
14885
14941
|
"kind": "field",
|
|
14886
14942
|
"name": "computedStyles",
|
package/dist/primer-loader.d.ts
CHANGED
|
@@ -3052,7 +3052,7 @@ declare class HostedInputController<T extends HostedInputHost> implements Reacti
|
|
|
3052
3052
|
/**
|
|
3053
3053
|
* Registers this controller with the card form context for centralized management
|
|
3054
3054
|
*/
|
|
3055
|
-
|
|
3055
|
+
registerWithContext(): void;
|
|
3056
3056
|
/**
|
|
3057
3057
|
* Unregisters this controller from the card form context
|
|
3058
3058
|
*/
|
|
@@ -3121,7 +3121,9 @@ export interface InputComponentConfig {
|
|
|
3121
3121
|
onInput?: (value: string) => void;
|
|
3122
3122
|
}
|
|
3123
3123
|
declare abstract class AbstractCardInputComponent extends LitElement implements HostedInputHost {
|
|
3124
|
-
|
|
3124
|
+
private _cardFormContext;
|
|
3125
|
+
get cardFormContext(): CardFormContext | null;
|
|
3126
|
+
set cardFormContext(value: CardFormContext | null);
|
|
3125
3127
|
computedStyles: CSSStyleDeclaration | null;
|
|
3126
3128
|
/** Tracks which properties were explicitly set by the user */
|
|
3127
3129
|
protected readonly _userAssignedProps: Set<string>;
|