@justifi/webcomponents 0.2.1 → 0.3.2

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.
Files changed (78) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/Payment-5781460e.js +71 -0
  3. package/dist/cjs/{index-ca2cd154.js → index-4f2a13d2.js} +13 -389
  4. package/dist/cjs/justifi-bank-account-form.cjs.entry.js +3 -2
  5. package/dist/cjs/{justifi-billing-form.cjs.entry.js → justifi-billing-form_2.cjs.entry.js} +30 -1
  6. package/dist/cjs/justifi-card-form.cjs.entry.js +3 -2
  7. package/dist/cjs/justifi-payment-form.cjs.entry.js +46 -3
  8. package/dist/cjs/justifi-payment-method-form.cjs.entry.js +22 -16
  9. package/dist/cjs/justifi-payments-list.cjs.entry.js +3 -70
  10. package/dist/cjs/loader.cjs.js +2 -2
  11. package/dist/cjs/select-input_2.cjs.entry.js +1 -1
  12. package/dist/cjs/webcomponents.cjs.js +2 -2
  13. package/dist/collection/api/Payment.js +1 -1
  14. package/dist/collection/collection-manifest.json +1 -0
  15. package/dist/collection/components/bank-account-form/bank-account-form.js +19 -1
  16. package/dist/collection/components/billing-form/billing-form.js +49 -0
  17. package/dist/collection/components/card-form/card-form.js +19 -1
  18. package/dist/collection/components/card-form/card-form.stories.js +35 -28
  19. package/dist/collection/components/payment-form/payment-form.js +145 -7
  20. package/dist/collection/components/payment-form/payment-form.stories.js +82 -0
  21. package/dist/collection/components/payment-form/payment-method-selector.js +86 -0
  22. package/dist/collection/components/payment-form/tokenize.js +1 -0
  23. package/dist/collection/components/payment-method-form/payment-method-form.js +21 -1
  24. package/dist/components/Payment.js +69 -0
  25. package/dist/components/billing-form.js +2185 -0
  26. package/dist/components/index.d.ts +1 -0
  27. package/dist/components/index.js +1 -0
  28. package/dist/components/justifi-bank-account-form.js +3 -1
  29. package/dist/components/justifi-billing-form.js +1 -2175
  30. package/dist/components/justifi-card-form.js +3 -1
  31. package/dist/components/justifi-payment-form.js +85 -6
  32. package/dist/components/justifi-payment-method-selector.d.ts +11 -0
  33. package/dist/components/justifi-payment-method-selector.js +6 -0
  34. package/dist/components/justifi-payments-list.js +1 -68
  35. package/dist/components/payment-method-form.js +22 -15
  36. package/dist/components/payment-method-selector.js +42 -0
  37. package/dist/esm/Payment-3f7570a8.js +69 -0
  38. package/dist/esm/{index-05706eb5.js → index-3ce5521c.js} +13 -389
  39. package/dist/esm/justifi-bank-account-form.entry.js +3 -2
  40. package/dist/esm/{justifi-billing-form.entry.js → justifi-billing-form_2.entry.js} +30 -2
  41. package/dist/esm/justifi-card-form.entry.js +3 -2
  42. package/dist/esm/justifi-payment-form.entry.js +46 -3
  43. package/dist/esm/justifi-payment-method-form.entry.js +22 -16
  44. package/dist/esm/justifi-payments-list.entry.js +2 -69
  45. package/dist/esm/loader.js +2 -2
  46. package/dist/esm/select-input_2.entry.js +1 -1
  47. package/dist/esm/webcomponents.js +2 -2
  48. package/dist/types/api/Payment.d.ts +1 -1
  49. package/dist/types/components/bank-account-form/bank-account-form.d.ts +1 -0
  50. package/dist/types/components/billing-form/billing-form-schema.d.ts +7 -0
  51. package/dist/types/components/billing-form/billing-form.d.ts +3 -8
  52. package/dist/types/components/card-form/card-form.d.ts +1 -0
  53. package/dist/types/components/card-form/card-form.stories.d.ts +1 -0
  54. package/dist/types/components/payment-form/payment-form.d.ts +17 -1
  55. package/dist/types/components/payment-form/payment-form.stories.d.ts +44 -0
  56. package/dist/types/components/payment-form/payment-method-selector.d.ts +10 -0
  57. package/dist/types/components/payment-form/tokenize.d.ts +5 -0
  58. package/dist/types/components/payment-method-form/payment-method-form.d.ts +1 -0
  59. package/dist/types/components.d.ts +40 -2
  60. package/dist/webcomponents/p-19a76621.entry.js +1 -0
  61. package/dist/webcomponents/p-21e020a8.js +1 -0
  62. package/dist/webcomponents/p-250118e4.entry.js +1 -0
  63. package/dist/webcomponents/p-3536328b.entry.js +1 -0
  64. package/dist/webcomponents/p-6633de1b.entry.js +1 -0
  65. package/dist/webcomponents/p-68e47ee5.entry.js +1 -0
  66. package/dist/webcomponents/p-6c3a226e.entry.js +1 -0
  67. package/dist/webcomponents/{p-3809130a.entry.js → p-763a2b4f.entry.js} +1 -1
  68. package/dist/webcomponents/p-9f34a2c1.js +2 -0
  69. package/dist/webcomponents/webcomponents.esm.js +1 -1
  70. package/package.json +18 -14
  71. package/readme.md +1 -1
  72. package/dist/webcomponents/p-67be9585.entry.js +0 -1
  73. package/dist/webcomponents/p-787671b9.entry.js +0 -1
  74. package/dist/webcomponents/p-87654bf4.entry.js +0 -1
  75. package/dist/webcomponents/p-8ee06fd1.js +0 -2
  76. package/dist/webcomponents/p-94ef2d0e.entry.js +0 -1
  77. package/dist/webcomponents/p-c07191dc.entry.js +0 -1
  78. package/dist/webcomponents/p-e5b0f047.entry.js +0 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### 0.3.2
8
+ > 12 April 2023
9
+
10
+ - Add `PaymentForm` component
11
+ - Allow `iframeOrigin` to be passed to `PaymentForm`, `CardForm`, `BankAccountForm`, and `PaymentMethodForm`
12
+
13
+ #### 0.2.2
14
+ > 6 April 2023
15
+
16
+ - Update documentation and documentation examples to use cdn.jsdelivr instead of unpkg
17
+
7
18
  #### 0.2.1
8
19
  > 28 March 2023
9
20
 
@@ -0,0 +1,71 @@
1
+ 'use strict';
2
+
3
+ var CaptureStrategy;
4
+ (function (CaptureStrategy) {
5
+ CaptureStrategy["automatic"] = "automatic";
6
+ CaptureStrategy["manual"] = "manual";
7
+ })(CaptureStrategy || (CaptureStrategy = {}));
8
+ exports.PaymentMethodTypes = void 0;
9
+ (function (PaymentMethodTypes) {
10
+ PaymentMethodTypes["card"] = "card";
11
+ PaymentMethodTypes["bankAccount"] = "bankAccount";
12
+ })(exports.PaymentMethodTypes || (exports.PaymentMethodTypes = {}));
13
+ var PaymentStatuses;
14
+ (function (PaymentStatuses) {
15
+ PaymentStatuses["pending"] = "pending";
16
+ PaymentStatuses["authorized"] = "authorized";
17
+ PaymentStatuses["succeeded"] = "succeeded";
18
+ PaymentStatuses["failed"] = "failed";
19
+ PaymentStatuses["disputed"] = "disputed";
20
+ PaymentStatuses["fully_refunded"] = "fully_refunded";
21
+ PaymentStatuses["partially_refunded"] = "partially_refunded";
22
+ })(PaymentStatuses || (PaymentStatuses = {}));
23
+ var PaymentDisputedStatuses;
24
+ (function (PaymentDisputedStatuses) {
25
+ // if a dispute is 'won', we don't show a dispute status, just general status
26
+ PaymentDisputedStatuses["lost"] = "lost";
27
+ PaymentDisputedStatuses["open"] = "open";
28
+ })(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
29
+ class Payment {
30
+ constructor(payment) {
31
+ this.id = payment.id;
32
+ this.account_id = payment.account_id;
33
+ this.amount = payment.amount;
34
+ this.amount_disputed = payment.amount_disputed;
35
+ this.amount_refundable = payment.amount_refundable;
36
+ this.amount_refunded = payment.amount_refunded;
37
+ this.balance = payment.balance;
38
+ this.captured = payment.captured;
39
+ this.capture_strategy = payment.capture_strategy;
40
+ this.currency = payment.currency;
41
+ this.description = payment.description;
42
+ this.disputed = payment.disputed;
43
+ this.disputes = payment.disputes;
44
+ this.error_code = payment.error_code;
45
+ this.error_description = payment.error_description;
46
+ this.fee_amount = payment.fee_amount;
47
+ this.is_test = payment.is_test;
48
+ this.metadata = payment.metadata;
49
+ this.payment_method = payment.payment_method;
50
+ this.payment_intent_id = payment.payment_intent_id;
51
+ this.refunded = payment.refunded;
52
+ this.status = payment.status;
53
+ this.created_at = payment.created_at;
54
+ this.updated_at = payment.updated_at;
55
+ }
56
+ get disputedStatus() {
57
+ const lost = this.disputes.some((dispute) => dispute.status === PaymentDisputedStatuses.lost);
58
+ // if a dispute is 'won', we don't show a dispute status, just general status
59
+ if (!this.disputed) {
60
+ return null;
61
+ }
62
+ else if (lost) {
63
+ return PaymentDisputedStatuses.lost;
64
+ }
65
+ else {
66
+ return PaymentDisputedStatuses.open;
67
+ }
68
+ }
69
+ }
70
+
71
+ exports.Payment = Payment;
@@ -31,11 +31,7 @@ const NAMESPACE = 'webcomponents';
31
31
  * Modified for Stencil's renderer and slot projection
32
32
  */
33
33
  let scopeId;
34
- let contentRef;
35
34
  let hostTagName;
36
- let useNativeShadowDom = false;
37
- let checkSlotFallbackVisibility = false;
38
- let checkSlotRelocate = false;
39
35
  let isSvgMode = false;
40
36
  let queuePending = false;
41
37
  const createTime = (fnName, tagName = '') => {
@@ -80,7 +76,6 @@ const isComplexType = (o) => {
80
76
  // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
81
77
  const h = (nodeName, vnodeData, ...children) => {
82
78
  let child = null;
83
- let slotName = null;
84
79
  let simple = false;
85
80
  let lastSimple = false;
86
81
  const vNodeChildren = [];
@@ -108,9 +103,6 @@ const h = (nodeName, vnodeData, ...children) => {
108
103
  };
109
104
  walk(children);
110
105
  if (vnodeData) {
111
- if (vnodeData.name) {
112
- slotName = vnodeData.name;
113
- }
114
106
  {
115
107
  const classData = vnodeData.className || vnodeData.class;
116
108
  if (classData) {
@@ -128,9 +120,6 @@ const h = (nodeName, vnodeData, ...children) => {
128
120
  if (vNodeChildren.length > 0) {
129
121
  vnode.$children$ = vNodeChildren;
130
122
  }
131
- {
132
- vnode.$name$ = slotName;
133
- }
134
123
  return vnode;
135
124
  };
136
125
  const newVNode = (tag, text) => {
@@ -144,9 +133,6 @@ const newVNode = (tag, text) => {
144
133
  {
145
134
  vnode.$attrs$ = null;
146
135
  }
147
- {
148
- vnode.$name$ = null;
149
- }
150
136
  return vnode;
151
137
  };
152
138
  const Host = {};
@@ -177,6 +163,11 @@ const isHost = (node) => node && node.$tag$ === Host;
177
163
  const parsePropertyValue = (propValue, propType) => {
178
164
  // ensure this value is of the correct prop type
179
165
  if (propValue != null && !isComplexType(propValue)) {
166
+ if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
167
+ // per the HTML spec, any string value means it is a boolean true value
168
+ // but we'll cheat here and say that the string "false" is the boolean false
169
+ return propValue === 'false' ? false : propValue === '' || !!propValue;
170
+ }
180
171
  if (propType & 1 /* MEMBER_FLAGS.String */) {
181
172
  // could have been passed as a number or boolean
182
173
  // but we still want it as a string
@@ -451,36 +442,13 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
451
442
  let i = 0;
452
443
  let elm;
453
444
  let childNode;
454
- let oldVNode;
455
- if (!useNativeShadowDom) {
456
- // remember for later we need to check to relocate nodes
457
- checkSlotRelocate = true;
458
- if (newVNode.$tag$ === 'slot') {
459
- if (scopeId) {
460
- // scoped css needs to add its scoped id to the parent element
461
- parentElm.classList.add(scopeId + '-s');
462
- }
463
- newVNode.$flags$ |= newVNode.$children$
464
- ? // slot element has fallback content
465
- 2 /* VNODE_FLAGS.isSlotFallback */
466
- : // slot element does not have fallback content
467
- 1 /* VNODE_FLAGS.isSlotReference */;
468
- }
469
- }
470
445
  if (newVNode.$text$ !== null) {
471
446
  // create text node
472
447
  elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
473
448
  }
474
- else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
475
- // create a slot reference node
476
- elm = newVNode.$elm$ =
477
- doc.createTextNode('');
478
- }
479
449
  else {
480
450
  // create element
481
- elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
482
- ? 'slot-fb'
483
- : newVNode.$tag$));
451
+ elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
484
452
  // add css classes, attrs, props, listeners, etc.
485
453
  {
486
454
  updateElement(null, newVNode, isSvgMode);
@@ -493,7 +461,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
493
461
  if (newVNode.$children$) {
494
462
  for (i = 0; i < newVNode.$children$.length; ++i) {
495
463
  // create the node
496
- childNode = createElm(oldParentVNode, newVNode, i, elm);
464
+ childNode = createElm(oldParentVNode, newVNode, i);
497
465
  // return node could have been null
498
466
  if (childNode) {
499
467
  // append our new node
@@ -502,62 +470,20 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
502
470
  }
503
471
  }
504
472
  }
505
- {
506
- elm['s-hn'] = hostTagName;
507
- if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
508
- // remember the content reference comment
509
- elm['s-sr'] = true;
510
- // remember the content reference comment
511
- elm['s-cr'] = contentRef;
512
- // remember the slot name, or empty string for default slot
513
- elm['s-sn'] = newVNode.$name$ || '';
514
- // check if we've got an old vnode for this slot
515
- oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
516
- if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
517
- // we've got an old slot vnode and the wrapper is being replaced
518
- // so let's move the old slot content back to it's original location
519
- putBackInOriginalLocation(oldParentVNode.$elm$, false);
520
- }
521
- }
522
- }
523
473
  return elm;
524
474
  };
525
- const putBackInOriginalLocation = (parentElm, recursive) => {
526
- plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
527
- const oldSlotChildNodes = parentElm.childNodes;
528
- for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
529
- const childNode = oldSlotChildNodes[i];
530
- if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
531
- // // this child node in the old element is from another component
532
- // // remove this node from the old slot's parent
533
- // childNode.remove();
534
- // and relocate it back to it's original location
535
- parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
536
- // remove the old original location comment entirely
537
- // later on the patch function will know what to do
538
- // and move this to the correct spot in need be
539
- childNode['s-ol'].remove();
540
- childNode['s-ol'] = undefined;
541
- checkSlotRelocate = true;
542
- }
543
- if (recursive) {
544
- putBackInOriginalLocation(childNode, recursive);
545
- }
546
- }
547
- plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
548
- };
549
475
  const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
550
- let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
476
+ let containerElm = (parentElm);
551
477
  let childNode;
552
478
  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
553
479
  containerElm = containerElm.shadowRoot;
554
480
  }
555
481
  for (; startIdx <= endIdx; ++startIdx) {
556
482
  if (vnodes[startIdx]) {
557
- childNode = createElm(null, parentVNode, startIdx, parentElm);
483
+ childNode = createElm(null, parentVNode, startIdx);
558
484
  if (childNode) {
559
485
  vnodes[startIdx].$elm$ = childNode;
560
- containerElm.insertBefore(childNode, referenceNode(before) );
486
+ containerElm.insertBefore(childNode, before);
561
487
  }
562
488
  }
563
489
  }
@@ -567,20 +493,6 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
567
493
  if ((vnode = vnodes[startIdx])) {
568
494
  elm = vnode.$elm$;
569
495
  callNodeRefs(vnode);
570
- {
571
- // we're removing this element
572
- // so it's possible we need to show slot fallback content now
573
- checkSlotFallbackVisibility = true;
574
- if (elm['s-ol']) {
575
- // remove the original location comment
576
- elm['s-ol'].remove();
577
- }
578
- else {
579
- // it's possible that child nodes of the node
580
- // that's being removed are slot nodes
581
- putBackInOriginalLocation(elm, true);
582
- }
583
- }
584
496
  // remove the vnode's element from the dom
585
497
  elm.remove();
586
498
  }
@@ -696,23 +608,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
696
608
  newEndVnode = newCh[--newEndIdx];
697
609
  }
698
610
  else if (isSameVnode(oldStartVnode, newEndVnode)) {
699
- // case: "Vnode moved right"
700
- //
701
- // We've found that the last node in our window on the new children is
702
- // the same VNode as the _first_ node in our window on the old children
703
- // we're dealing with now. Visually, this is the layout of these two
704
- // nodes:
705
- //
706
- // newCh: [..., newStartVnode , ... , newEndVnode , ...]
707
- // ^^^^^^^^^^^
708
- // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
709
- // ^^^^^^^^^^^^^
710
- //
711
- // In this situation we need to patch `newEndVnode` onto `oldStartVnode`
712
- // and move the DOM element for `oldStartVnode`.
713
- if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
714
- putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
715
- }
716
611
  patch(oldStartVnode, newEndVnode);
717
612
  // We need to move the element for `oldStartVnode` into a position which
718
613
  // will be appropriate for `newEndVnode`. For this we can use
@@ -736,24 +631,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
736
631
  newEndVnode = newCh[--newEndIdx];
737
632
  }
738
633
  else if (isSameVnode(oldEndVnode, newStartVnode)) {
739
- // case: "Vnode moved left"
740
- //
741
- // We've found that the first node in our window on the new children is
742
- // the same VNode as the _last_ node in our window on the old children.
743
- // Visually, this is the layout of these two nodes:
744
- //
745
- // newCh: [..., newStartVnode , ... , newEndVnode , ...]
746
- // ^^^^^^^^^^^^^
747
- // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
748
- // ^^^^^^^^^^^
749
- //
750
- // In this situation we need to patch `newStartVnode` onto `oldEndVnode`
751
- // (which will handle updating any changed attributes, reconciling their
752
- // children etc) but we also need to move the DOM node to which
753
- // `oldEndVnode` corresponds.
754
- if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
755
- putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
756
- }
757
634
  patch(oldEndVnode, newStartVnode);
758
635
  // We've already checked above if `oldStartVnode` and `newStartVnode` are
759
636
  // the same node, so since we're here we know that they are not. Thus we
@@ -770,13 +647,13 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
770
647
  // the key of the first new child OR the build is not using `key`
771
648
  // attributes at all. In either case we need to create a new element
772
649
  // for the new node.
773
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
650
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
774
651
  newStartVnode = newCh[++newStartIdx];
775
652
  }
776
653
  if (node) {
777
654
  // if we created a new node then handle inserting it to the DOM
778
655
  {
779
- parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
656
+ oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
780
657
  }
781
658
  }
782
659
  }
@@ -813,21 +690,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
813
690
  // compare if two vnode to see if they're "technically" the same
814
691
  // need to have the same element tag, and same key to be the same
815
692
  if (leftVNode.$tag$ === rightVNode.$tag$) {
816
- if (leftVNode.$tag$ === 'slot') {
817
- return leftVNode.$name$ === rightVNode.$name$;
818
- }
819
693
  return true;
820
694
  }
821
695
  return false;
822
696
  };
823
- const referenceNode = (node) => {
824
- // this node was relocated to a new location in the dom
825
- // because of some other component's slot
826
- // but we still have an html comment in place of where
827
- // it's original location was according to it's original vdom
828
- return (node && node['s-ol']) || node;
829
- };
830
- const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
831
697
  /**
832
698
  * Handle reconciling an outdated VNode with a new one which corresponds to
833
699
  * it. This function handles flushing updates to the DOM and reconciling the
@@ -840,14 +706,10 @@ const patch = (oldVNode, newVNode) => {
840
706
  const elm = (newVNode.$elm$ = oldVNode.$elm$);
841
707
  const oldChildren = oldVNode.$children$;
842
708
  const newChildren = newVNode.$children$;
843
- const tag = newVNode.$tag$;
844
709
  const text = newVNode.$text$;
845
- let defaultHolder;
846
710
  if (text === null) {
847
711
  {
848
- if (tag === 'slot')
849
- ;
850
- else {
712
+ {
851
713
  // either this is the first render of an element OR it's an update
852
714
  // AND we already know it's possible it could have changed
853
715
  // this updates the element's css classes, attrs, props, listeners, etc.
@@ -873,147 +735,12 @@ const patch = (oldVNode, newVNode) => {
873
735
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
874
736
  }
875
737
  }
876
- else if ((defaultHolder = elm['s-cr'])) {
877
- // this element has slotted content
878
- defaultHolder.parentNode.textContent = text;
879
- }
880
738
  else if (oldVNode.$text$ !== text) {
881
739
  // update the text content for the text only vnode
882
740
  // and also only if the text is different than before
883
741
  elm.data = text;
884
742
  }
885
743
  };
886
- const updateFallbackSlotVisibility = (elm) => {
887
- // tslint:disable-next-line: prefer-const
888
- const childNodes = elm.childNodes;
889
- let childNode;
890
- let i;
891
- let ilen;
892
- let j;
893
- let slotNameAttr;
894
- let nodeType;
895
- for (i = 0, ilen = childNodes.length; i < ilen; i++) {
896
- childNode = childNodes[i];
897
- if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
898
- if (childNode['s-sr']) {
899
- // this is a slot fallback node
900
- // get the slot name for this slot reference node
901
- slotNameAttr = childNode['s-sn'];
902
- // by default always show a fallback slot node
903
- // then hide it if there are other slots in the light dom
904
- childNode.hidden = false;
905
- for (j = 0; j < ilen; j++) {
906
- nodeType = childNodes[j].nodeType;
907
- if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
908
- // this sibling node is from a different component OR is a named fallback slot node
909
- if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
910
- childNode.hidden = true;
911
- break;
912
- }
913
- }
914
- else {
915
- // this is a default fallback slot node
916
- // any element or text node (with content)
917
- // should hide the default fallback slot node
918
- if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
919
- (nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
920
- childNode.hidden = true;
921
- break;
922
- }
923
- }
924
- }
925
- }
926
- // keep drilling down
927
- updateFallbackSlotVisibility(childNode);
928
- }
929
- }
930
- };
931
- const relocateNodes = [];
932
- const relocateSlotContent = (elm) => {
933
- // tslint:disable-next-line: prefer-const
934
- let childNode;
935
- let node;
936
- let hostContentNodes;
937
- let slotNameAttr;
938
- let relocateNodeData;
939
- let j;
940
- let i = 0;
941
- const childNodes = elm.childNodes;
942
- const ilen = childNodes.length;
943
- for (; i < ilen; i++) {
944
- childNode = childNodes[i];
945
- if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
946
- // first got the content reference comment node
947
- // then we got it's parent, which is where all the host content is in now
948
- hostContentNodes = node.parentNode.childNodes;
949
- slotNameAttr = childNode['s-sn'];
950
- for (j = hostContentNodes.length - 1; j >= 0; j--) {
951
- node = hostContentNodes[j];
952
- if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
953
- // let's do some relocating to its new home
954
- // but never relocate a content reference node
955
- // that is suppose to always represent the original content location
956
- if (isNodeLocatedInSlot(node, slotNameAttr)) {
957
- // it's possible we've already decided to relocate this node
958
- relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
959
- // made some changes to slots
960
- // let's make sure we also double check
961
- // fallbacks are correctly hidden or shown
962
- checkSlotFallbackVisibility = true;
963
- node['s-sn'] = node['s-sn'] || slotNameAttr;
964
- if (relocateNodeData) {
965
- // previously we never found a slot home for this node
966
- // but turns out we did, so let's remember it now
967
- relocateNodeData.$slotRefNode$ = childNode;
968
- }
969
- else {
970
- // add to our list of nodes to relocate
971
- relocateNodes.push({
972
- $slotRefNode$: childNode,
973
- $nodeToRelocate$: node,
974
- });
975
- }
976
- if (node['s-sr']) {
977
- relocateNodes.map((relocateNode) => {
978
- if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
979
- relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
980
- if (relocateNodeData && !relocateNode.$slotRefNode$) {
981
- relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
982
- }
983
- }
984
- });
985
- }
986
- }
987
- else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
988
- // so far this element does not have a slot home, not setting slotRefNode on purpose
989
- // if we never find a home for this element then we'll need to hide it
990
- relocateNodes.push({
991
- $nodeToRelocate$: node,
992
- });
993
- }
994
- }
995
- }
996
- }
997
- if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
998
- relocateSlotContent(childNode);
999
- }
1000
- }
1001
- };
1002
- const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
1003
- if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1004
- if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
1005
- return true;
1006
- }
1007
- if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
1008
- return true;
1009
- }
1010
- return false;
1011
- }
1012
- if (nodeToRelocate['s-sn'] === slotNameAttr) {
1013
- return true;
1014
- }
1015
- return slotNameAttr === '';
1016
- };
1017
744
  const callNodeRefs = (vNode) => {
1018
745
  {
1019
746
  vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
@@ -1022,7 +749,6 @@ const callNodeRefs = (vNode) => {
1022
749
  };
1023
750
  const renderVdom = (hostRef, renderFnResults) => {
1024
751
  const hostElm = hostRef.$hostElement$;
1025
- const cmpMeta = hostRef.$cmpMeta$;
1026
752
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
1027
753
  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
1028
754
  hostTagName = hostElm.tagName;
@@ -1033,90 +759,8 @@ const renderVdom = (hostRef, renderFnResults) => {
1033
759
  {
1034
760
  scopeId = hostElm['s-sc'];
1035
761
  }
1036
- {
1037
- contentRef = hostElm['s-cr'];
1038
- useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
1039
- // always reset
1040
- checkSlotFallbackVisibility = false;
1041
- }
1042
762
  // synchronous patch
1043
763
  patch(oldVNode, rootVnode);
1044
- {
1045
- // while we're moving nodes around existing nodes, temporarily disable
1046
- // the disconnectCallback from working
1047
- plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1048
- if (checkSlotRelocate) {
1049
- relocateSlotContent(rootVnode.$elm$);
1050
- let relocateData;
1051
- let nodeToRelocate;
1052
- let orgLocationNode;
1053
- let parentNodeRef;
1054
- let insertBeforeNode;
1055
- let refNode;
1056
- let i = 0;
1057
- for (; i < relocateNodes.length; i++) {
1058
- relocateData = relocateNodes[i];
1059
- nodeToRelocate = relocateData.$nodeToRelocate$;
1060
- if (!nodeToRelocate['s-ol']) {
1061
- // add a reference node marking this node's original location
1062
- // keep a reference to this node for later lookups
1063
- orgLocationNode =
1064
- doc.createTextNode('');
1065
- orgLocationNode['s-nr'] = nodeToRelocate;
1066
- nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
1067
- }
1068
- }
1069
- for (i = 0; i < relocateNodes.length; i++) {
1070
- relocateData = relocateNodes[i];
1071
- nodeToRelocate = relocateData.$nodeToRelocate$;
1072
- if (relocateData.$slotRefNode$) {
1073
- // by default we're just going to insert it directly
1074
- // after the slot reference node
1075
- parentNodeRef = relocateData.$slotRefNode$.parentNode;
1076
- insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
1077
- orgLocationNode = nodeToRelocate['s-ol'];
1078
- while ((orgLocationNode = orgLocationNode.previousSibling)) {
1079
- refNode = orgLocationNode['s-nr'];
1080
- if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
1081
- refNode = refNode.nextSibling;
1082
- if (!refNode || !refNode['s-nr']) {
1083
- insertBeforeNode = refNode;
1084
- break;
1085
- }
1086
- }
1087
- }
1088
- if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
1089
- nodeToRelocate.nextSibling !== insertBeforeNode) {
1090
- // we've checked that it's worth while to relocate
1091
- // since that the node to relocate
1092
- // has a different next sibling or parent relocated
1093
- if (nodeToRelocate !== insertBeforeNode) {
1094
- if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
1095
- // probably a component in the index.html that doesn't have it's hostname set
1096
- nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
1097
- }
1098
- // add it back to the dom but in its new home
1099
- parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
1100
- }
1101
- }
1102
- }
1103
- else {
1104
- // this node doesn't have a slot home to go to, so let's hide it
1105
- if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
1106
- nodeToRelocate.hidden = true;
1107
- }
1108
- }
1109
- }
1110
- }
1111
- if (checkSlotFallbackVisibility) {
1112
- updateFallbackSlotVisibility(rootVnode.$elm$);
1113
- }
1114
- // done moving nodes around
1115
- // allow the disconnect callback to work again
1116
- plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
1117
- // always reset
1118
- relocateNodes.length = 0;
1119
- }
1120
764
  };
1121
765
  const attachToAncestor = (hostRef, ancestorComponent) => {
1122
766
  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1534,15 +1178,6 @@ const connectedCallback = (elm) => {
1534
1178
  if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
1535
1179
  // first time this component has connected
1536
1180
  hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
1537
- {
1538
- // initUpdate
1539
- // if the slot polyfill is required we'll need to put some nodes
1540
- // in here to act as original content anchors as we move nodes around
1541
- // host element has been connected to the DOM
1542
- if ((cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
1543
- setContentReference(elm);
1544
- }
1545
- }
1546
1181
  {
1547
1182
  // find the first ancestor component (if there is one) and register
1548
1183
  // this component as one of the actively loading child components for its ancestor
@@ -1584,17 +1219,6 @@ const connectedCallback = (elm) => {
1584
1219
  endConnected();
1585
1220
  }
1586
1221
  };
1587
- const setContentReference = (elm) => {
1588
- // only required when we're NOT using native shadow dom (slot)
1589
- // or this browser doesn't support native shadow dom
1590
- // and this host element was NOT created with SSR
1591
- // let's pick out the inner content for slot projection
1592
- // create a node to represent where the original
1593
- // content was first placed, which is useful later on
1594
- const contentRefElm = (elm['s-cr'] = doc.createComment(''));
1595
- contentRefElm['s-cn'] = true;
1596
- elm.insertBefore(contentRefElm, elm.firstChild);
1597
- };
1598
1222
  const disconnectedCallback = (elm) => {
1599
1223
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1600
1224
  const hostRef = getHostRef(elm);