@primer-io/primer-js 0.0.2 → 0.0.3

package/dist/custom-elements.json

@@ -18,7 +18,7 @@
         {
           "kind": "variable",
           "name": "P",
-          "default": "class extends m{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this.hasAssignedContent=!1;this.locale=\"en-GB\";this.onSlotChange=e=>{let s=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=s.length>0,this.requestUpdate()};this.sdkContextController=new Bt(this),this.sdkStateController=new Kt(this),this.primerEventsController=new pt(this),this.styleProcessingController=new Gt(this),new se(this)}attributeChangedCallback(e,r,s){e===\"customstyles\"?this.styleProcessingController.processCustomStyles(s):super.attributeChangedCallback(e,r,s)}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Ne(this.options?.locale)?this.locale=Ie(this.options?.locale):E.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ae(this.locale||\"en-GB\"))}render(){let e=this.sdkStateController.state,r=e.isLoading,s=e.error,i=!r&&!s;return d` ${C(r&&!this.disableLoader,()=>d`<primer-spinner size=\"large\"></primer-spinner>`,()=>h)} ${C(s,()=>d`<p>There was an error loading the checkout</p>`)} ${C(i,()=>d` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${C(this.hasAssignedContent,()=>h,()=>d`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(e,r,s){super.addEventListener(e,r,s)}}"
+          "default": "class extends m{constructor(){super();this.customStyles=\"\";this.clientToken=\"\";this.options={};this.disableLoader=!1;this.hasAssignedContent=!1;this.locale=\"en-GB\";this.onSlotChange=e=>{let s=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=s.length>0,this.requestUpdate()};this.sdkContextController=new jt(this),this.sdkStateController=new Kt(this),this.primerEventsController=new pt(this),this.styleProcessingController=new Gt(this),new se(this)}attributeChangedCallback(e,r,s){e===\"customstyles\"?this.styleProcessingController.processCustomStyles(s):super.attributeChangedCallback(e,r,s)}willUpdate(e){e.has(\"options\")&&(this.options?.locale&&(Ne(this.options?.locale)?this.locale=Ie(this.options?.locale):E.warn(\"\\u{1F30E}\\u2757 Unsupported locale provided:\",this.options?.locale,\"- Falling back to default locale `en-GB`\")),Ae(this.locale||\"en-GB\"))}render(){let e=this.sdkStateController.state,r=e.isLoading,s=e.error,i=!r&&!s;return d` ${C(r&&!this.disableLoader,()=>d`<primer-spinner size=\"large\"></primer-spinner>`,()=>h)} ${C(s,()=>d`<p>There was an error loading the checkout</p>`)} ${C(i,()=>d` <slot name=\"main\" @slotchange=${this.onSlotChange}></slot> ${C(this.hasAssignedContent,()=>h,()=>d`<primer-main></primer-main>`)} `,()=>h)} `}addEventListener(e,r,s){super.addEventListener(e,r,s)}}"
         },
         {
           "kind": "variable",
@@ -78,12 +78,12 @@
         {
           "kind": "variable",
           "name": "rt",
-          "default": "class extends m{constructor(){super();this.paymentManagers=new Map;this._buttonId=\"button-container\";this.loadManagerTask=new S(this,{args:()=>[this.paymentMethod?.type],task:async([e])=>{if(!e)return _;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),new S(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return _;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);return r?(await e.createButton().render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,{style:{shadowRoot:this.paymentMethod?.type===\"GOOGLE_PAY\"}}),e):void 0}})}updated(e){e.has(\"paymentMethod\")&&this.paymentMethod&&(this._buttonId=`button-container ${this.paymentMethod.type}`)}render(){return this.loadManagerTask.render({error:()=>h,complete:()=>d` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>h})}}"
+          "default": "class extends m{constructor(){super();this.paymentManagers=new Map;this._buttonId=\"button-container\";this.loadManagerTask=new S(this,{args:()=>[this.paymentMethod?.type],task:async([e])=>{if(!e)return L;let r=this.paymentManagers.get(e)?.manager;if(!r)throw new Error(`No manager found for payment method type ${e}`);return r}}),new S(this,{args:()=>[this.loadManagerTask.value],task:async([e])=>{if(!e)return L;await this.updateComplete;let r=this.shadowRoot?.getElementById(this._buttonId);if(!r)return;let s=this.calculateButtonHeight(),i=e.createButton(),a=this.createRenderOptions(s);return await i.render(this.paymentMethod?.type===\"GOOGLE_PAY\"?this.shadowRoot?.getRootNode():r,a),e}})}calculateButtonHeight(){if(typeof window>\"u\"||!this.isConnected)return 0;let e=getComputedStyle(this),r=parseFloat(e.getPropertyValue(\"--primer-typography-title-large-line-height\")),s=parseFloat(e.getPropertyValue(\"--primer-space-medium\"));return r+2*s}createRenderOptions(e){let r=this.paymentMethod?.type;return r===\"GOOGLE_PAY\"?{style:{shadowRoot:!0}}:r===\"APPLE_PAY\"?{style:{buttonHeight:e}}:r===\"PAYPAL\"?{style:{buttonHeight:e}}:{style:{buttonHeight:e}}}updated(e){e.has(\"paymentMethod\")&&this.paymentMethod&&(this._buttonId=`button-container-${this.paymentMethod.type}`)}render(){return this.loadManagerTask.render({error:()=>h,complete:()=>d` <!-- The native button container is rendered first --> <div class=\"native-button-container\" id=\"${this._buttonId}\"></div> `,pending:()=>h})}}"
         },
         {
           "kind": "variable",
-          "name": "j",
-          "default": "class extends m{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new L(this,{context:pe,initialValue:null});this.eventsController=new pt(this);this.setupCardFormTask=new S(this,{task:async([e])=>{if(!e?.manager)return _;let{manager:r}=e,{cardNumberInput:s,expiryInput:i,cvvInput:a}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:s,expiryInput:i,cvvInput:a,setCardholderName:c=>r.setCardholderName(c),setCardNetwork:c=>{this.selectedCardNetwork=c},validate:()=>r.validate(),submit:c=>r.submit(c)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=e=>{let s=e.target.closest(\"button, primer-button\");if(!s)return;this.isSubmitButton(s)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let s=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=s.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer-form-submit\",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer-form-submit\",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(e){let r=e.tagName.toLowerCase(),s=r===\"button\",i=r===\"primer-button\";return s&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||i&&(e.getAttribute(\"buttonType\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e)return;let r=await e.validate?.();if(r?.valid){let s=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(s)}else{let s=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:s}),this.eventsController.dispatchFormSubmitErrors(s)}}render(){return this.setupCardFormTask.status===Z.ERROR||this.setupCardFormTask.status===Z.INITIAL?h:d` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>C(this.hasAssignedContent,()=>h,()=>d` <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> <primer-input-card-holder-name></primer-input-card-holder-name> </div> <primer-card-form-submit></primer-card-form-submit> `)})} </form> `}}"
+          "name": "B",
+          "default": "class extends m{constructor(){super(...arguments);this.hasAssignedContent=!1;this.selectedCardNetwork=null;this.paymentManagers=new Map;this.cardFormProvider=new _(this,{context:pe,initialValue:null});this.eventsController=new pt(this);this.setupCardFormTask=new S(this,{task:async([e])=>{if(!e?.manager)return L;let{manager:r}=e,{cardNumberInput:s,expiryInput:i,cvvInput:a}=r.createHostedInputs();return this.cardFormProvider.setValue({cardNumberInput:s,expiryInput:i,cvvInput:a,setCardholderName:c=>r.setCardholderName(c),setCardNetwork:c=>{this.selectedCardNetwork=c},validate:()=>r.validate(),submit:c=>r.submit(c)}),!0},args:()=>[this.paymentManagers.get(\"PAYMENT_CARD\")]});this.handleSlotButtonClick=e=>{let s=e.target.closest(\"button, primer-button\");if(!s)return;this.isSubmitButton(s)&&(e.preventDefault(),this.submitCardPayment())};this.handleDirectSubmit=e=>{e.stopPropagation(),this.submitCardPayment()};this.onSlotChange=e=>{let s=e.target.assignedNodes({flatten:!0});this.hasAssignedContent=s.length>0};this.handleFormSubmit=e=>{e.preventDefault(),e.stopPropagation(),this.submitCardPayment()}}connectedCallback(){super.connectedCallback(),this.addEventListener(\"click\",this.handleSlotButtonClick),this.addEventListener(\"primer-form-submit\",this.handleDirectSubmit)}disconnectedCallback(){this.removeEventListener(\"click\",this.handleSlotButtonClick),this.removeEventListener(\"primer-form-submit\",this.handleDirectSubmit),super.disconnectedCallback()}isSubmitButton(e){let r=e.tagName.toLowerCase(),s=r===\"button\",i=r===\"primer-button\";return s&&(e.getAttribute(\"type\")===\"submit\"||e.hasAttribute(\"data-submit\"))||i&&(e.getAttribute(\"buttonType\")===\"submit\"||e.hasAttribute(\"data-submit\"))}async submitCardPayment(){let e=this.cardFormProvider.value;if(!e)return;let r=await e.validate?.();if(r?.valid){let s=await e.submit?.(this.selectedCardNetwork?{cardNetwork:this.selectedCardNetwork}:void 0);this.eventsController.dispatchFormSubmitSuccess(s)}else{let s=r?.validationErrors;this.cardFormProvider.setValue({...e,errors:s}),this.eventsController.dispatchFormSubmitErrors(s)}}render(){return this.setupCardFormTask.status===Z.ERROR||this.setupCardFormTask.status===Z.INITIAL?h:d` <form @submit=${this.handleFormSubmit}> <slot name=\"card-form-content\" @slotchange=${this.onSlotChange}></slot> ${this.setupCardFormTask.render({complete:()=>C(this.hasAssignedContent,()=>h,()=>d` <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> <primer-input-card-holder-name></primer-input-card-holder-name> </div> <primer-card-form-submit></primer-card-form-submit> `)})} </form> `}}"
         },
         {
           "kind": "variable",
@@ -107,7 +107,7 @@
         },
         {
           "kind": "variable",
-          "name": "B",
+          "name": "j",
           "default": "class extends m{constructor(){super(...arguments);this._userAssignedProps=new Set;this._internalButtonText=\"\";this.variant=\"primary\";this.disabled=!1;this.handleClick=e=>{if(e.preventDefault(),this.disabled)return;let r=new CustomEvent(\"primer-form-submit\",{bubbles:!0,composed:!0,detail:{source:\"primer-card-form-submit\"}});this.dispatchEvent(r)}}get buttonText(){return this._userAssignedProps.has(\"buttonText\")?this._internalButtonText:O(\"pay\",{id:\"pay\"})}set buttonText(e){let r=this.buttonText;e!==\"\"?(this._userAssignedProps.add(\"buttonText\"),this._internalButtonText=e):(this._userAssignedProps.delete(\"buttonText\"),this._internalButtonText=\"\"),this.requestUpdate(\"buttonText\",r)}render(){return d` <primer-button buttonType=\"submit\" variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick} data-submit > ${this.buttonText} </primer-button> `}}"
         },
         {
@@ -155,7 +155,7 @@
           "kind": "js",
           "name": "CardForm",
           "declaration": {
-            "name": "j",
+            "name": "B",
             "module": "cdn/primer-components.js"
           }
         },
@@ -211,7 +211,7 @@
           "kind": "js",
           "name": "CardFormSubmit",
           "declaration": {
-            "name": "B",
+            "name": "j",
             "module": "cdn/primer-components.js"
           }
         },
@@ -335,7 +335,7 @@
       "declarations": [
         {
           "kind": "function",
-          "name": "L"
+          "name": "y"
         }
       ],
       "exports": [
@@ -343,7 +343,7 @@
           "kind": "js",
           "name": "loadPrimer",
           "declaration": {
-            "name": "L",
+            "name": "y",
             "module": "dist/primer-loader.js"
           }
         }
@@ -5391,7 +5391,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.",
           "name": "NativePaymentComponent",
           "members": [
             {
@@ -5428,6 +5428,36 @@
               },
               "privacy": "private",
               "default": "new Task(this, { args: () => [ this.paymentMethod?.type as NativePaymentMethodTypes | undefined, ], task: async ([type]) => { if (!type) { return initialState; } const manager = this.paymentManagers.get(type)?.manager; if (!manager) { throw new Error(`No manager found for payment method type ${type}`); } return manager; }, })"
+            },
+            {
+              "kind": "method",
+              "name": "calculateButtonHeight",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "description": "Calculates the button height based on CSS variables\nMirrors the calculation used in the host styles"
+            },
+            {
+              "kind": "method",
+              "name": "createRenderOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    style: Record<string, unknown>;\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "buttonHeight",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Creates render options with appropriate styles based on payment method type"
             }
           ],
           "attributes": [

package/dist/jsx/index.d.ts

@@ -421,7 +421,8 @@ export type CustomElements = {
   "primer-card-form": Partial<CardFormComponentProps & BaseProps & BaseEvents>;
 
   /**
-   *
+   * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
+   * with proper height calculations based on design system variables.
    * ---
    *
    */

package/dist/primer-loader.d.ts

@@ -1,4 +1,3 @@
-export declare function loadPrimer(): Promise<void>;
 export type CardNetwork = {
 	displayName: string;
 	network: string;
@@ -1896,6 +1895,7 @@ export interface GooglePayStyles {
 }
 export interface ApplePayStyles {
 	buttonType?: "plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe";
+	buttonHeight?: number;
 	buttonStyle?: "white" | "white-outline" | "black";
 }
 export interface HeadlessButtonRenderOptions {
@@ -2637,6 +2637,15 @@ declare class NativePaymentComponent extends LitElement {
 	private _buttonId;
 	private loadManagerTask;
 	constructor();
+	/**
+	 * Calculates the button height based on CSS variables
+	 * Mirrors the calculation used in the host styles
+	 */
+	private calculateButtonHeight;
+	/**
+	 * Creates render options with appropriate styles based on payment method type
+	 */
+	private createRenderOptions;
 	protected updated(changedProperties: PropertyValues): void;
 	render(): symbol | TemplateResult<1> | undefined;
 }
@@ -3230,5 +3239,11 @@ declare global {
 		"primer-checkout": PrimerCheckoutComponent;
 	}
 }
+type PaymentsObject$1 = PaymentsObject;
+export declare function loadPrimer(): Promise<void>;
+
+export {
+	PaymentsObject$1 as PaymentsObject,
+};
 
 export {};

package/dist/primer-loader.js

@@ -1 +1 @@
-var n="https://sdk.primer.io/web/v2-latest/Primer.min.js",i="https://sdk.primer.io/web/primer-js/v0-latest/primer-components.js";var s=typeof window<"u"&&typeof window.document<"u";function m(e){return document.querySelector(`script[src^="${e}"]`)}function a(e,t){let r=document.createElement("script");return r.setAttribute("src",e),r.setAttribute("async",""),r.setAttribute("crossorigin","anonymous"),t&&r.setAttribute("type","module"),r}function o(e,t=!1){if(!s)throw new Error("Cannot load script in server environment");let r=m(e)??a(e,t);return new Promise((p,c)=>{r.onload=()=>{p()},r.onerror=()=>{c()},r.parentNode||document.head.appendChild(r)})}async function d(e=n){await o(e),await window.Primer.preloadPrimer()}async function l(e=i){await o(e,!0)}async function L(){await d(),await l()}export{L as loadPrimer};
+var n="https://sdk.primer.io/web/v2-latest/Primer.min.js",s="https://sdk.primer.io/web/primer-js/v0-latest/primer-components.js";var i=typeof window<"u"&&typeof window.document<"u";function m(e){return document.querySelector(`script[src^="${e}"]`)}function a(e,r){let t=document.createElement("script");return t.setAttribute("src",e),t.setAttribute("async",""),t.setAttribute("crossorigin","anonymous"),r&&t.setAttribute("type","module"),t}function o(e,r=!1){if(!i)throw new Error("Cannot load script in server environment");let t=m(e)??a(e,r);return new Promise((p,c)=>{t.onload=()=>{p()},t.onerror=()=>{c()},t.parentNode||document.head.appendChild(t)})}async function d(e=n){await o(e),await window.Primer.preloadPrimer()}async function l(e=s){await o(e,!0)}async function y(){await d(),await l()}export{y as loadPrimer};

package/dist/vscode.html-custom-data.json

@@ -164,7 +164,7 @@
     },
     {
       "name": "primer-native-payment",
-      "description": "\n---\n",
+      "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
       "attributes": [
         {
           "name": "paymentMethod",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@primer-io/primer-js",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -444,7 +444,7 @@
         },
         {
           "name": "primer-native-payment",
-          "description": "\n---\n",
+          "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer-io/primer-js",
   "license": "BSD-3-Clause",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "./dist/primer-loader.js",
   "types": "./dist/primer-loader.d.ts",