@primer-io/primer-js 1.0.9 → 1.1.0

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.
@@ -121,6 +121,23 @@
121
121
  ],
122
122
  "references": []
123
123
  },
124
+ {
125
+ "name": "primer-icon",
126
+ "description": "\n---\n",
127
+ "attributes": [
128
+ { "name": "color", "values": [] },
129
+ {
130
+ "name": "size",
131
+ "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
132
+ },
133
+ {
134
+ "name": "name",
135
+ "description": "The name of the icon to draw - available names can be found under library.ts file",
136
+ "values": [{ "name": "IconName" }]
137
+ }
138
+ ],
139
+ "references": []
140
+ },
124
141
  {
125
142
  "name": "primer-error-message",
126
143
  "description": "A reusable atomic error message component that displays error information\nwith appropriate styling and accessibility attributes.\n\nThis component is fully accessible and designed to work with screen readers.\nIt includes animations for visibility transitions.\n---\n\n\n### **CSS Parts:**\n - **error-message** - The main error message container\n- **error-icon** - The error icon container\n- **error-content** - The error text content",
@@ -143,23 +160,6 @@
143
160
  ],
144
161
  "references": []
145
162
  },
146
- {
147
- "name": "primer-icon",
148
- "description": "\n---\n",
149
- "attributes": [
150
- { "name": "color", "values": [] },
151
- {
152
- "name": "size",
153
- "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
154
- },
155
- {
156
- "name": "name",
157
- "description": "The name of the icon to draw - available names can be found under library.ts file",
158
- "values": [{ "name": "IconName" }]
159
- }
160
- ],
161
- "references": []
162
- },
163
163
  {
164
164
  "name": "primer-input",
165
165
  "description": "A fully type-safe input component that wraps the native HTML input element\nwhile providing additional functionality and styling.\n---\n\n\n### **Events:**\n - **input** - Fired when the input value changes\n- **change** - Fired when the input value is committed\n- **focus** - Fired when the input receives focus\n- **blur** - Fired when the input loses focus\n- **invalid** - Fired when the input fails validation\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focus the input element\n- **blur(): _void_** - Remove focus from the input element\n- **select(): _void_** - Select all text in the input element\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _void_** - Set the selection range of the input element\n- **checkValidity(): _boolean_** - Check if the input element is valid\n- **reportValidity(): _boolean_** - Report the validity of the input element\n- **addEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | AddEventListenerOptions_): _void_** - Type safe event dispatcher - allows consumers to use proper types\nwhen listening to events from this component\n- **removeEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | EventListenerOptions_): _void_** - Type safe event dispatcher removal\n\n### **CSS Parts:**\n - **input** - The native input element",
@@ -224,12 +224,6 @@
224
224
  ],
225
225
  "references": []
226
226
  },
227
- {
228
- "name": "primer-portal",
229
- "description": "\n---\n\n\n### **Events:**\n - **eventName**",
230
- "attributes": [],
231
- "references": []
232
- },
233
227
  {
234
228
  "name": "primer-select",
235
229
  "description": "A native select dropdown component\n---\n\n\n### **Events:**\n - **change** - Fired when selection changes\n- **input** - Fired when input value changes\n- **focus** - Fired when select receives focus\n- **blur** - Fired when select loses focus",
@@ -290,12 +284,18 @@
290
284
  "references": []
291
285
  },
292
286
  {
293
- "name": "primer-ach-payment",
294
- "description": "\n---\n\n\n### **Events:**\n - **primer-ach-error**\n- **primer-ach-bank-details-collected**\n- **primer-ach-mandate-confirmed**\n- **primer-ach-mandate-declined**",
287
+ "name": "primer-adyen-klarna",
288
+ "description": "\n---\n",
295
289
  "attributes": [
296
290
  {
297
291
  "name": "paymentMethod",
292
+ "description": "The payment method from context",
298
293
  "values": [{ "name": "InitializedPaymentMethod" }]
294
+ },
295
+ {
296
+ "name": "disabled",
297
+ "description": "Whether the component is disabled",
298
+ "values": []
299
299
  }
300
300
  ],
301
301
  "references": []
@@ -328,23 +328,7 @@
328
328
  "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.\n---\n",
329
329
  "attributes": [
330
330
  { "name": "hide-labels", "values": [] },
331
- { "name": "disabled", "values": [] },
332
- {
333
- "name": "paymentManagers",
334
- "description": "Payment managers injected from context",
335
- "values": [{ "name": "InitializedManagersMap" }]
336
- }
337
- ],
338
- "references": []
339
- },
340
- {
341
- "name": "primer-dynamic-payment",
342
- "description": "\n---\n",
343
- "attributes": [
344
- {
345
- "name": "paymentMethod",
346
- "values": [{ "name": "InitializedPaymentMethod" }]
347
- }
331
+ { "name": "disabled", "values": [] }
348
332
  ],
349
333
  "references": []
350
334
  },
@@ -357,52 +341,49 @@
357
341
  {
358
342
  "name": "primer-klarna",
359
343
  "description": "This component renders Klarna payment method in a card-like (accordion) container with\npayment categories options to choose from.\n\n[ Pay with Klarna v ] --> accordion header\n\n[ Pay Now ] [ Buy now, pay later ] --> payment categories options from Klarna\n[ Continue with Klarna ] --> opens a Klarna popup\n---\n",
344
+ "attributes": [{ "name": "disabled", "values": [] }],
345
+ "references": []
346
+ },
347
+ {
348
+ "name": "primer-payment-method",
349
+ "description": "\n---\n",
360
350
  "attributes": [
361
- {
362
- "name": "paymentManagers",
363
- "values": [{ "name": "InitializedManagersMap" }]
364
- },
365
- { "name": "sdkState", "values": [{ "name": "SdkStateContextType" }] },
366
- {
367
- "name": "headlessUtils",
368
- "values": [{ "name": "HeadlessUtilsContextType" }]
369
- },
370
- {
371
- "name": "klarnaCategories",
372
- "values": [{ "name": "KlarnaCategoriesContextType" }]
373
- },
351
+ { "name": "type", "values": [{ "name": "PaymentMethodType" }] },
374
352
  { "name": "disabled", "values": [] }
375
353
  ],
376
354
  "references": []
377
355
  },
378
356
  {
379
- "name": "primer-payment-method",
380
- "description": "\n---\n",
357
+ "name": "primer-payment-method-accordion",
358
+ "description": "\n---\n\n\n### **Events:**\n - **expanded-change**",
381
359
  "attributes": [
382
360
  { "name": "type", "values": [{ "name": "PaymentMethodType" }] },
383
361
  { "name": "disabled", "values": [] },
362
+ { "name": "expanded", "values": [] },
384
363
  {
385
- "name": "paymentMethods",
386
- "values": [{ "name": "PaymentMethodsContextType" }]
364
+ "name": "suppress-blur-collapse",
365
+ "description": "When true, suppresses auto-collapse on window blur.\nUsed when payment flows open external popups (e.g. Klarna).",
366
+ "values": []
387
367
  }
388
368
  ],
389
369
  "references": []
390
370
  },
371
+ {
372
+ "name": "primer-payment-method-button",
373
+ "description": "\n---\n\n\n### **Events:**\n - **payment-method-click**",
374
+ "attributes": [
375
+ { "name": "type", "values": [{ "name": "PaymentMethodType" }] },
376
+ { "name": "disabled", "values": [] }
377
+ ],
378
+ "references": []
379
+ },
391
380
  {
392
381
  "name": "primer-payment-method-container",
393
382
  "description": "\n---\n",
394
383
  "attributes": [
395
384
  { "name": "include", "values": [] },
396
385
  { "name": "exclude", "values": [] },
397
- { "name": "disabled", "values": [] },
398
- {
399
- "name": "paymentMethods",
400
- "values": [{ "name": "PaymentMethodsContextType" }]
401
- },
402
- {
403
- "name": "clientOptions",
404
- "values": [{ "name": "ClientOptionsContextType" }]
405
- }
386
+ { "name": "disabled", "values": [] }
406
387
  ],
407
388
  "references": []
408
389
  },
@@ -435,25 +416,13 @@
435
416
  {
436
417
  "name": "primer-checkout-error",
437
418
  "description": "\n---\n",
438
- "attributes": [
439
- { "name": "sdkState", "values": [{ "name": "SdkStateContextType" }] }
440
- ],
419
+ "attributes": [],
441
420
  "references": []
442
421
  },
443
422
  {
444
423
  "name": "primer-main",
445
424
  "description": "\n---\n",
446
- "attributes": [
447
- {
448
- "name": "paymentMethods",
449
- "values": [{ "name": "PaymentMethodsContextType" }]
450
- },
451
- { "name": "sdkState", "values": [{ "name": "SdkStateContextType" }] },
452
- {
453
- "name": "clientOptions",
454
- "values": [{ "name": "ClientOptionsContextType" }]
455
- }
456
- ],
425
+ "attributes": [],
457
426
  "references": []
458
427
  },
459
428
  {
@@ -462,7 +431,7 @@
462
431
  "attributes": [
463
432
  {
464
433
  "name": "paymentMethod",
465
- "values": [{ "name": "InitializedPaymentMethod" }]
434
+ "values": [{ "name": "RedirectPaymentMethod" }]
466
435
  },
467
436
  { "name": "disabled", "values": [] }
468
437
  ],
@@ -486,6 +455,15 @@
486
455
  ],
487
456
  "references": []
488
457
  },
458
+ {
459
+ "name": "primer-payment-method-accordion-confirm-button",
460
+ "description": "\n---\n\n\n### **Events:**\n - **confirm**",
461
+ "attributes": [
462
+ { "name": "disabled", "values": [] },
463
+ { "name": "loading", "values": [] }
464
+ ],
465
+ "references": []
466
+ },
489
467
  {
490
468
  "name": "primer-card-form-submit",
491
469
  "description": "A form submit button component for card forms.\n\nProvides a consistent submit button with translation support and configurable visibility.\nWhen `submitButton.useBuiltInButton` is set to `false`, the component will not render\nany DOM elements, allowing external buttons to handle form submission by dispatching\nthe `primer:card-submit` event.\n---\n",
@@ -495,15 +473,6 @@
495
473
  "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
496
474
  "values": []
497
475
  },
498
- {
499
- "name": "headlessUtils",
500
- "values": [{ "name": "HeadlessUtilsContextType" }]
501
- },
502
- {
503
- "name": "clientOptions",
504
- "values": [{ "name": "ClientOptionsContextType" }]
505
- },
506
- { "name": "sdkState", "values": [{ "name": "SdkStateContextType" }] },
507
476
  {
508
477
  "name": "cardFormContext",
509
478
  "values": [{ "name": "CardFormContext" }]
@@ -531,10 +500,6 @@
531
500
  "name": "primer-input-card-expiry",
532
501
  "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
533
502
  "attributes": [
534
- {
535
- "name": "computedStyles",
536
- "values": [{ "name": "CSSStyleDeclaration" }]
537
- },
538
503
  {
539
504
  "name": "label",
540
505
  "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -557,10 +522,6 @@
557
522
  "name": "primer-input-card-holder-name",
558
523
  "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
559
524
  "attributes": [
560
- {
561
- "name": "computedStyles",
562
- "values": [{ "name": "CSSStyleDeclaration" }]
563
- },
564
525
  {
565
526
  "name": "label",
566
527
  "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -583,10 +544,6 @@
583
544
  "name": "primer-input-card-number",
584
545
  "description": "Card number input component with dynamic card network detection and selection\n---\n\n\n### **Methods:**\n \n\n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code",
585
546
  "attributes": [
586
- {
587
- "name": "computedStyles",
588
- "values": [{ "name": "CSSStyleDeclaration" }]
589
- },
590
547
  {
591
548
  "name": "label",
592
549
  "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -609,10 +566,6 @@
609
566
  "name": "primer-input-cvv",
610
567
  "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
611
568
  "attributes": [
612
- {
613
- "name": "computedStyles",
614
- "values": [{ "name": "CSSStyleDeclaration" }]
615
- },
616
569
  {
617
570
  "name": "label",
618
571
  "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -637,11 +590,7 @@
637
590
  "attributes": [
638
591
  {
639
592
  "name": "paymentMethod",
640
- "values": [{ "name": "InitializedPaymentMethod" }]
641
- },
642
- {
643
- "name": "paymentManagers",
644
- "values": [{ "name": "InitializedManagersMap" }]
593
+ "values": [{ "name": "NativePaymentMethod" }]
645
594
  },
646
595
  { "name": "disabled", "values": [] }
647
596
  ],
@@ -653,11 +602,7 @@
653
602
  "attributes": [
654
603
  {
655
604
  "name": "paymentMethod",
656
- "values": [{ "name": "InitializedPaymentMethod" }]
657
- },
658
- {
659
- "name": "paymentManagers",
660
- "values": [{ "name": "InitializedManagersMap" }]
605
+ "values": [{ "name": "NativePaymentMethod" }]
661
606
  },
662
607
  { "name": "disabled", "values": [] }
663
608
  ],
@@ -669,11 +614,7 @@
669
614
  "attributes": [
670
615
  {
671
616
  "name": "paymentMethod",
672
- "values": [{ "name": "InitializedPaymentMethod" }]
673
- },
674
- {
675
- "name": "paymentManagers",
676
- "values": [{ "name": "InitializedManagersMap" }]
617
+ "values": [{ "name": "NativePaymentMethod" }]
677
618
  },
678
619
  { "name": "disabled", "values": [] }
679
620
  ],
@@ -689,10 +630,6 @@
689
630
  "name": "primer-vault-cvv-input",
690
631
  "description": "CVV Input component for vault payment methods\nRenders a secure iframe for CVV input when required by the selected payment method\nUses dedicated CVV context to minimize re-renders\n---\n\n\n### **Methods:**\n - **onCvvInputChange()** - Update CVV metadata in the context when input changes",
691
632
  "attributes": [
692
- {
693
- "name": "computedStyles",
694
- "values": [{ "name": "CSSStyleDeclaration" }]
695
- },
696
633
  {
697
634
  "name": "paymentMethod",
698
635
  "values": [{ "name": "PaymentCardVaultedMethod" }]
@@ -761,10 +698,6 @@
761
698
  "name": "primer-vault-payment-method-item",
762
699
  "description": "VaultPaymentMethodItemComponent - displays a single payment method\nUses the VaultManagerController for display formatting\nNow supports selection via the simplified button checked state\nEnhanced with smooth transitions between edit and payment modes\nAlways renders the primer-button for consistent UI and improved accessibility\n---\n",
763
700
  "attributes": [
764
- {
765
- "name": "headlessUtils",
766
- "values": [{ "name": "HeadlessUtilsContextType" }]
767
- },
768
701
  {
769
702
  "name": "isEditMode",
770
703
  "description": "Whether the component is in edit mode",
@@ -782,11 +715,6 @@
782
715
  "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
783
716
  "values": []
784
717
  },
785
- {
786
- "name": "headlessInstance",
787
- "values": [{ "name": "HeadlessUtilsContextType" }]
788
- },
789
- { "name": "sdkState", "values": [{ "name": "SdkStateContextType" }] },
790
718
  {
791
719
  "name": "variant",
792
720
  "description": "The button variant to use.",