@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/components/{p-a0d406ca.js → p-f8ac52c6.js}

@@ -1,13 +1,69 @@
-import { N as NAMESPACE, B as BUILD } from './p-37ed3ebb.js';
+import { B as BUILD, N as NAMESPACE } from './p-88af3744.js';
 
 /*
- Stencil Client Platform v4.17.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+var hostRefs = /* @__PURE__ */ new WeakMap();
+var getHostRef = (ref) => hostRefs.get(ref);
+var isMemberInElement = (elm, memberName) => memberName in elm;
+var consoleError = (e, el) => (0, console.error)(e, el);
+
+// src/client/client-style.ts
+var styles = /* @__PURE__ */ new Map();
+var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+var win = typeof window !== "undefined" ? window : {};
+var doc = win.document || { head: {} };
+var plt = {
+  $flags$: 0,
+  $resourcesUrl$: "",
+  jmp: (h2) => h2(),
+  raf: (h2) => requestAnimationFrame(h2),
+  ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+  ce: (eventName, opts) => new CustomEvent(eventName, opts)
+};
+var promiseResolve = (v) => Promise.resolve(v);
+var queuePending = false;
+var queueDomReads = [];
+var queueDomWrites = [];
+var queueTask = (queue, write) => (cb) => {
+  queue.push(cb);
+  if (!queuePending) {
+    queuePending = true;
+    if (write && plt.$flags$ & 4 /* queueSync */) {
+      nextTick(flush);
+    } else {
+      plt.raf(flush);
+    }
+  }
+};
+var consume = (queue) => {
+  for (let i2 = 0; i2 < queue.length; i2++) {
+    try {
+      queue[i2](performance.now());
+    } catch (e) {
+      consoleError(e);
+    }
+  }
+  queue.length = 0;
+};
+var flush = () => {
+  consume(queueDomReads);
+  {
+    consume(queueDomWrites);
+    if (queuePending = queueDomReads.length > 0) {
+      plt.raf(flush);
+    }
+  }
+};
+var nextTick = (cb) => promiseResolve().then(cb);
+var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
@@ -82,8 +138,6 @@ var createTime = (fnName, tagName = "") => {
     };
   }
 };
-var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
-var XLINK_NS = "http://www.w3.org/1999/xlink";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -357,18 +411,18 @@ var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
-var updateElement = (oldVnode, newVnode, isSvgMode2, memberName) => {
+var updateElement = (oldVnode, newVnode, isSvgMode2) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
   const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
   {
-    for (memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
+    for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
       }
     }
   }
-  for (memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
+  for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
     setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode2, newVnode.$flags$);
   }
 };
@@ -425,7 +479,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     elm = newVNode2.$elm$ = doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
     if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
@@ -436,6 +490,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if (isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
+    {
+      updateElementScopeIds(elm, parentElm);
+    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2, elm);
@@ -483,7 +540,7 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) {
     const childNode = oldSlotChildNodes[i2];
     if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
-      parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+      insertBefore(parentReferenceNode(childNode), childNode, referenceNode(childNode));
       childNode["s-ol"].remove();
       childNode["s-ol"] = void 0;
       childNode["s-sh"] = void 0;
@@ -506,7 +563,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        containerElm.insertBefore(childNode, referenceNode(before) );
+        insertBefore(containerElm, childNode, referenceNode(before) );
       }
     }
   }
@@ -566,7 +623,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
-      parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+      insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
@@ -574,7 +631,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
-      parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+      insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
@@ -603,7 +660,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       }
       if (node) {
         {
-          parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+          insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         }
       }
     }
@@ -769,6 +826,39 @@ var nullifyVNodeRefs = (vNode) => {
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
+var insertBefore = (parent, newNode, reference) => {
+  const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
+  {
+    updateElementScopeIds(newNode, parent);
+  }
+  return inserted;
+};
+var findScopeIds = (element) => {
+  const scopeIds = [];
+  if (element) {
+    scopeIds.push(
+      ...element["s-scs"] || [],
+      element["s-si"],
+      element["s-sc"],
+      ...findScopeIds(element.parentElement)
+    );
+  }
+  return scopeIds;
+};
+var updateElementScopeIds = (element, parent, iterateChildNodes = false) => {
+  var _a;
+  if (element && parent && element.nodeType === 1 /* ElementNode */) {
+    const scopeIds = new Set(findScopeIds(parent).filter(Boolean));
+    if (scopeIds.size) {
+      (_a = element.classList) == null ? void 0 : _a.add(...element["s-scs"] = [...scopeIds]);
+      if (element["s-ol"] || iterateChildNodes) {
+        for (const childNode of Array.from(element.childNodes)) {
+          updateElementScopeIds(childNode, element, true);
+        }
+      }
+    }
+  }
+};
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   var _a, _b, _c, _d;
   const hostElm = hostRef.$hostElement$;
@@ -811,7 +901,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         if (!nodeToRelocate["s-ol"]) {
           const orgLocationNode = doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
-          nodeToRelocate.parentNode.insertBefore(nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
+          insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
       }
       for (const relocateData of relocateNodes) {
@@ -842,7 +932,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
               if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
-              parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+              insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
               if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
                 nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false;
               }
@@ -890,6 +980,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
   const instance = elm;
+  if (!instance) {
+    throw new Error(
+      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
+    );
+  }
   let maybePromise;
   if (isInitialLoad) {
     {
@@ -899,7 +994,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
+  console.error(err2);
+  fn();
+}) : fn();
 var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
 var updateComponent = async (hostRef, instance, isInitialLoad) => {
   var _a;
@@ -1020,62 +1118,9 @@ var safeCall = (instance, method, arg) => {
   }
   return void 0;
 };
-var addHydratedFlag = (elm) => elm.classList.add("hydrated") ;
-
-// src/client/client-host-ref.ts
-var hostRefs = /* @__PURE__ */ new WeakMap();
-var getHostRef = (ref) => hostRefs.get(ref);
-var isMemberInElement = (elm, memberName) => memberName in elm;
-var consoleError = (e, el) => (0, console.error)(e, el);
-
-// src/client/client-style.ts
-var styles = /* @__PURE__ */ new Map();
-var win = typeof window !== "undefined" ? window : {};
-var doc = win.document || { head: {} };
-var plt = {
-  $flags$: 0,
-  $resourcesUrl$: "",
-  jmp: (h2) => h2(),
-  raf: (h2) => requestAnimationFrame(h2),
-  ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-  ce: (eventName, opts) => new CustomEvent(eventName, opts)
-};
-var promiseResolve = (v) => Promise.resolve(v);
-var queuePending = false;
-var queueDomReads = [];
-var queueDomWrites = [];
-var queueTask = (queue, write) => (cb) => {
-  queue.push(cb);
-  if (!queuePending) {
-    queuePending = true;
-    if (write && plt.$flags$ & 4 /* queueSync */) {
-      nextTick(flush);
-    } else {
-      plt.raf(flush);
-    }
-  }
-};
-var consume = (queue) => {
-  for (let i2 = 0; i2 < queue.length; i2++) {
-    try {
-      queue[i2](performance.now());
-    } catch (e) {
-      consoleError(e);
-    }
-  }
-  queue.length = 0;
-};
-var flush = () => {
-  consume(queueDomReads);
-  {
-    consume(queueDomWrites);
-    if (queuePending = queueDomReads.length > 0) {
-      plt.raf(flush);
-    }
-  }
+var addHydratedFlag = (elm) => {
+  var _a;
+  return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
 };
-var nextTick = (cb) => promiseResolve().then(cb);
-var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
 
 export { forceUpdate as f, getRenderingRef as g, h };

package/dist/components/{p-7790eae2.js → p-f97fa8ff.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-37ed3ebb.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-88af3744.js';
 import { g as getConvertedPixels } from './p-165a8492.js';
-import { d as defineCustomElement$5 } from './p-68f0e894.js';
-import { d as defineCustomElement$4 } from './p-0088d040.js';
-import { d as defineCustomElement$3 } from './p-163de6e2.js';
-import { d as defineCustomElement$2 } from './p-b0d6ed2e.js';
-import { d as defineCustomElement$1 } from './p-4d33055f.js';
+import { d as defineCustomElement$5 } from './p-7e8270ec.js';
+import { d as defineCustomElement$4 } from './p-7530ef19.js';
+import { d as defineCustomElement$3 } from './p-d73512b2.js';
+import { d as defineCustomElement$2 } from './p-a9b1c410.js';
+import { d as defineCustomElement$1 } from './p-04a30e22.js';
 
 /**
  * Returns the closest parent element past the Shadow Dom with the specified selector.
@@ -380,119 +380,6 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
         this.__registerHost();
         this.__attachShadow();
         this.selectEvent = createEvent(this, "selectEvent", 7);
-        /** The parent element containing the components siblings. */
-        this.parentElement = null;
-        /** The resize observer watching element resizes. */
-        this.resizeObserver = null;
-        /** An object containing the previous, watched, element sizes.
-         * index: element class name.
-         * number: the height sum of the element's children.
-         */
-        this.sizes = {};
-        /**
-         * Dispatches a custom 'tet-card-resize' event to the `parentElement` with class names of the elements that have changed size.
-         */
-        this.emitResize = () => {
-            /* Skip resize on wide cards */
-            if (this.currentCardType === 'wide60-40') {
-                return;
-            }
-            const resizedElements = [];
-            const resizeables = Array.from(querySelectorAllDeep("[class*='js-resize']", this.host));
-            for (const resizeable of resizeables) {
-                const resizeableHeight = this.getElementInnerHeight(resizeable);
-                const selector = Array.from(resizeable.classList).find((className) => className.includes('js-resize'));
-                if (this.sizes[selector] !== resizeableHeight) {
-                    resizedElements.push(selector);
-                }
-                this.sizes[selector] = resizeableHeight;
-            }
-            /** Only dispatch if there are changes. */
-            if (resizedElements.length) {
-                this.parentElement.dispatchEvent(new CustomEvent('tet-card-resize', { detail: resizedElements }));
-            }
-        };
-        /**
-         * Adds bottom padding to the observed elements if they are smaller than those of their sibling cards.
-         * @param event A custom event containing the selectors of the elements that have changed size.
-         */
-        this.resizeCard = (event) => {
-            const tabCardsContainer = closestPastShadow(this.parentElement, '.tet-compare-cards-tab__cards');
-            let parentContainer;
-            if (tabCardsContainer) {
-                parentContainer = querySelectorAllDeep('tet-compare-card', tabCardsContainer);
-            }
-            else {
-                parentContainer = this.parentElement.querySelectorAll('tet-compare-card');
-            }
-            const siblings = Array.from(parentContainer).filter((card) => card != this.host);
-            const hostShadowRoot = this.host.shadowRoot;
-            const elementSizes = {};
-            for (const sibling of siblings) {
-                const siblingShadowRoot = sibling.shadowRoot;
-                /** if a sibling is `best-choice` add extra padding to the top. */
-                if (!this.bestChoice && siblingShadowRoot.querySelector('.card').classList.contains('best-choice')) {
-                    const firstElement = hostShadowRoot.querySelector('.best-choice-title');
-                    firstElement.style.paddingBottom = '1rem';
-                }
-                const siblingElements = Array.from(querySelectorAllDeep("[class*='js-resize']", sibling));
-                for (const siblingElement of siblingElements) {
-                    const selector = Array.from(siblingElement.classList).find((className) => className.includes('js-resize'));
-                    if (!event.detail.includes(selector)) {
-                        continue;
-                    }
-                    if (elementSizes[selector] === undefined) {
-                        elementSizes[selector] = [];
-                    }
-                    const height = this.getElementInnerHeight(siblingElement);
-                    elementSizes[selector].push({ element: siblingElement, height });
-                }
-            }
-            for (const selector in elementSizes) {
-                const element = querySelectorDeep(`.${selector}`, this.host);
-                const elementHeight = this.getElementInnerHeight(element);
-                /** Get the largest of the elements out of all cards. */
-                const largestHeight = elementSizes[selector].reduce((siblingA, siblingB) => (siblingA.height >= siblingB.height ? siblingA : siblingB), { element, height: elementHeight });
-                this.resizeObserver.unobserve(element);
-                if (largestHeight.element === element) {
-                    /** If the current element is the largest, remove the extra padding. */
-                    element.style.paddingBottom = null;
-                }
-                else {
-                    /** Get the current padding from the largest sibling, as they will not have the manually added padding. */
-                    const paddingBottom = getConvertedPixels(getComputedStyle(largestHeight.element).paddingBottom);
-                    element.style.paddingBottom = `${largestHeight.height - elementHeight + paddingBottom}px`;
-                }
-                this.resizeObserver.observe(element);
-            }
-        };
-        /** Gets the height sum of all direct child elements.
-         * @param element The parent element.
-         * @returns a pixel value of the child element height sum.
-         */
-        this.getElementInnerHeight = (element) => {
-            return Array.from(element.children)
-                .map((child) => child.getBoundingClientRect().height)
-                .reduce((a, b) => a + b, 0);
-        };
-        /** Attaches the `resizeObserver` to all elements containing a class selector containing `js-resize` */
-        this.observeResize = () => {
-            for (const element of Array.from(this.host.shadowRoot.querySelectorAll("[class*='js-resize']"))) {
-                this.resizeObserver.observe(element);
-            }
-        };
-        /**
-         * Set the current card type based on window width, essentially simulating media query behavior.
-         */
-        this.setCardType = () => {
-            const windowWidth = window.innerWidth;
-            if (this.currentCardType === 'wide60-40' && windowWidth <= this.minWideWidth) {
-                this.currentCardType = 'regular';
-            }
-            else if (this.currentCardType === 'regular' && windowWidth > this.minWideWidth) {
-                this.currentCardType = 'wide60-40';
-            }
-        };
         this.clickCallback = () => null;
         this.index = undefined;
         this.cardType = 'regular';
@@ -525,6 +412,20 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
         this.darkMode = false;
         this.currentCardType = this.cardType;
     }
+    get host() { return this; }
+    /**
+     * The selectEvent event emitter.
+     */
+    selectEvent;
+    /** The parent element containing the components siblings. */
+    parentElement = null;
+    /** The resize observer watching element resizes. */
+    resizeObserver = null;
+    /** An object containing the previous, watched, element sizes.
+     * index: element class name.
+     * number: the height sum of the element's children.
+     */
+    sizes = {};
     onClick() {
         this.selectEvent.emit({ index: this.index, target: this });
     }
@@ -561,6 +462,110 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
         }
         return this.parentElement;
     }
+    /**
+     * Dispatches a custom 'tet-card-resize' event to the `parentElement` with class names of the elements that have changed size.
+     */
+    emitResize = () => {
+        /* Skip resize on wide cards */
+        if (this.currentCardType === 'wide60-40') {
+            return;
+        }
+        const resizedElements = [];
+        const resizeables = Array.from(querySelectorAllDeep("[class*='js-resize']", this.host));
+        for (const resizeable of resizeables) {
+            const resizeableHeight = this.getElementInnerHeight(resizeable);
+            const selector = Array.from(resizeable.classList).find((className) => className.includes('js-resize'));
+            if (this.sizes[selector] !== resizeableHeight) {
+                resizedElements.push(selector);
+            }
+            this.sizes[selector] = resizeableHeight;
+        }
+        /** Only dispatch if there are changes. */
+        if (resizedElements.length) {
+            this.parentElement.dispatchEvent(new CustomEvent('tet-card-resize', { detail: resizedElements }));
+        }
+    };
+    /**
+     * Adds bottom padding to the observed elements if they are smaller than those of their sibling cards.
+     * @param event A custom event containing the selectors of the elements that have changed size.
+     */
+    resizeCard = (event) => {
+        const tabCardsContainer = closestPastShadow(this.parentElement, '.tet-compare-cards-tab__cards');
+        let parentContainer;
+        if (tabCardsContainer) {
+            parentContainer = querySelectorAllDeep('tet-compare-card', tabCardsContainer);
+        }
+        else {
+            parentContainer = this.parentElement.querySelectorAll('tet-compare-card');
+        }
+        const siblings = Array.from(parentContainer).filter((card) => card != this.host);
+        const hostShadowRoot = this.host.shadowRoot;
+        const elementSizes = {};
+        for (const sibling of siblings) {
+            const siblingShadowRoot = sibling.shadowRoot;
+            /** if a sibling is `best-choice` add extra padding to the top. */
+            if (!this.bestChoice && siblingShadowRoot.querySelector('.card').classList.contains('best-choice')) {
+                const firstElement = hostShadowRoot.querySelector('.best-choice-title');
+                firstElement.style.paddingBottom = '1rem';
+            }
+            const siblingElements = Array.from(querySelectorAllDeep("[class*='js-resize']", sibling));
+            for (const siblingElement of siblingElements) {
+                const selector = Array.from(siblingElement.classList).find((className) => className.includes('js-resize'));
+                if (!event.detail.includes(selector)) {
+                    continue;
+                }
+                if (elementSizes[selector] === undefined) {
+                    elementSizes[selector] = [];
+                }
+                const height = this.getElementInnerHeight(siblingElement);
+                elementSizes[selector].push({ element: siblingElement, height });
+            }
+        }
+        for (const selector in elementSizes) {
+            const element = querySelectorDeep(`.${selector}`, this.host);
+            const elementHeight = this.getElementInnerHeight(element);
+            /** Get the largest of the elements out of all cards. */
+            const largestHeight = elementSizes[selector].reduce((siblingA, siblingB) => (siblingA.height >= siblingB.height ? siblingA : siblingB), { element, height: elementHeight });
+            this.resizeObserver.unobserve(element);
+            if (largestHeight.element === element) {
+                /** If the current element is the largest, remove the extra padding. */
+                element.style.paddingBottom = null;
+            }
+            else {
+                /** Get the current padding from the largest sibling, as they will not have the manually added padding. */
+                const paddingBottom = getConvertedPixels(getComputedStyle(largestHeight.element).paddingBottom);
+                element.style.paddingBottom = `${largestHeight.height - elementHeight + paddingBottom}px`;
+            }
+            this.resizeObserver.observe(element);
+        }
+    };
+    /** Gets the height sum of all direct child elements.
+     * @param element The parent element.
+     * @returns a pixel value of the child element height sum.
+     */
+    getElementInnerHeight = (element) => {
+        return Array.from(element.children)
+            .map((child) => child.getBoundingClientRect().height)
+            .reduce((a, b) => a + b, 0);
+    };
+    /** Attaches the `resizeObserver` to all elements containing a class selector containing `js-resize` */
+    observeResize = () => {
+        for (const element of Array.from(this.host.shadowRoot.querySelectorAll("[class*='js-resize']"))) {
+            this.resizeObserver.observe(element);
+        }
+    };
+    /**
+     * Set the current card type based on window width, essentially simulating media query behavior.
+     */
+    setCardType = () => {
+        const windowWidth = window.innerWidth;
+        if (this.currentCardType === 'wide60-40' && windowWidth <= this.minWideWidth) {
+            this.currentCardType = 'regular';
+        }
+        else if (this.currentCardType === 'regular' && windowWidth > this.minWideWidth) {
+            this.currentCardType = 'wide60-40';
+        }
+    };
     getTheme() {
         if (this.darkMode) {
             if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
@@ -578,7 +583,7 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
             buttonContent = h("div", { class: "button", innerHTML: button });
         }
         else if (buttonArgs && buttonTitle) {
-            buttonContent = (h("div", { class: "button" }, h("tet-button", Object.assign({}, buttonArgs, { theme: this.darkMode || this.theme === 'dark' ? 'dark' : 'light', type: buttonType }), buttonTitle), buttonStyle && h("style", null, buttonStyle)));
+            buttonContent = (h("div", { class: "button" }, h("tet-button", { ...buttonArgs, theme: this.darkMode || this.theme === 'dark' ? 'dark' : 'light', type: buttonType }, buttonTitle), buttonStyle && h("style", null, buttonStyle)));
         }
         return (h("a", { target: target, href: link, "data-form-link": link, tabIndex: -1 }, buttonContent));
     }
@@ -607,7 +612,6 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
      * @returns rendered card body.
      */
     renderCard() {
-        var _a, _b, _c, _d, _e, _f;
         return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.currentCardType}`]: true,
@@ -632,7 +636,7 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
                 'no-divider': this.priceShownVertically
             }, part: "compare-card-title-wrapper" }, h("div", { class: {
                 'title-wrapper-inner': true
-            } }, this.options.heroTitle ? h("h3", { class: "hero-title" }, this.options.heroTitle) : '', this.options.mainTitle ? h("h3", { class: "main-title" }, this.options.mainTitle) : '', this.showSubTitle && this.options.subTitle ? (h("div", { class: "sub-title" }, this.options.subTitle, this.renderTooltip('infoItem'))) : (''), this.options.infoTitle ? h("div", { class: "info-title" }, this.options.infoTitle) : ''))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints && !this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper" }, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bulletPoints) === null || _b === void 0 ? void 0 : _b.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : (''), h("div", { class: "upsell-block" }, h("slot", { name: "upsell-block-slot" }))), this.options.netflixProductDescription ? (h("div", { class: "netflix-product-description" }, this.options.netflixProductDescription)) : (''), h("div", { class: "divided-information-wrapper js-resize-divide-slot" }, h("slot", { name: "divided-information-slot" }))), h("div", { class: "compare-card-half-40" }, h("div", { class: "price js-resize-price" }, this.options.price && !isNaN(parseFloat(this.options.price)) ? (h("div", { class: {
+            } }, this.options.heroTitle ? h("h3", { class: "hero-title" }, this.options.heroTitle) : '', this.options.mainTitle ? h("h3", { class: "main-title" }, this.options.mainTitle) : '', this.showSubTitle && this.options.subTitle ? (h("div", { class: "sub-title" }, this.options.subTitle, this.renderTooltip('infoItem'))) : (''), this.options.infoTitle ? h("div", { class: "info-title" }, this.options.infoTitle) : ''))) : (''), h("div", { class: "content-wrapper js-resize-content" }, h("div", { class: "custom-content-wrapper" }, h("slot", { name: "custom-slot" })), this.showBulletPoints && !this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper" }, this.options?.bulletPoints?.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : (''), h("div", { class: "upsell-block" }, h("slot", { name: "upsell-block-slot" }))), this.options.netflixProductDescription ? (h("div", { class: "netflix-product-description" }, this.options.netflixProductDescription)) : (''), h("div", { class: "divided-information-wrapper js-resize-divide-slot" }, h("slot", { name: "divided-information-slot" }))), h("div", { class: "compare-card-half-40" }, h("div", { class: "price js-resize-price" }, this.options.price && !isNaN(parseFloat(this.options.price)) ? (h("div", { class: {
                 'price-wrapper': true,
                 'price-wrap': this.options.priceWrap,
                 'price-flex-column': this.priceShownVertically
@@ -640,21 +644,19 @@ const TetCompareCard = /*@__PURE__*/ proxyCustomElement(class TetCompareCard ext
                 'secondary-link': true,
                 'tet-link': true,
                 [`${this.secondaryLinkPosition}`]: true
-            } }, this.options.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: this.options.secondaryLink }, this.options.secondaryLinkText)) : (h("a", { href: this.options.secondaryLink }, this.options.secondaryLinkText))))), this.showBulletPoints && this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper bottom" }, (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.bulletPoints) === null || _d === void 0 ? void 0 : _d.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : ('')), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : '', h("div", { class: "data-hidden" }, h("div", { "data-attribute": "hero-title" }, this.options.heroTitle ? this.options.heroTitle : ''), h("div", { "data-attribute": "main-title" }, this.options.mainTitle ? this.options.mainTitle : ''), h("div", { "data-attribute": "sub-title" }, this.options.subTitle ? this.options.subTitle : ''), h("div", { "data-attribute": "price" }, this.options.price ? this.formatPrice(this.options.price) : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? this.formatPrice(this.options.oldPrice) : ''), h("div", { "data-attribute": "term" }, this.options.term ? this.options.term : ''), h("div", { "data-attribute": "term-text" }, this.options.termText ? this.options.termText : ''), h("div", { "data-attribute": "helper" }, this.options.helper ? this.options.helper : ''), h("div", { "data-attribute": "description" }, h("slot", { name: "description-slot" })), h("div", { "data-attribute": "custom-slot" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { "data-attribute": "bullet-points" }, (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.bulletPoints) === null || _f === void 0 ? void 0 : _f.map((bulletpoint) => (h("div", null, bulletpoint))))) : (''), h("div", { "data-attribute": "divided-information" }, h("slot", { name: "divided-information-slot" })), this.options.pricePrefix ?
+            } }, this.options.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: this.options.secondaryLink }, this.options.secondaryLinkText)) : (h("a", { href: this.options.secondaryLink }, this.options.secondaryLinkText))))), this.showBulletPoints && this.options.bulletPointPositionBottom ? (h("div", { class: "bullet-points-wrapper bottom" }, this.options?.bulletPoints?.map((bulletpoint) => (h("div", { class: "bullet-point" }, h("tet-icon", { class: "icon", name: "check-circle" }), h("div", { innerHTML: bulletpoint })))))) : ('')), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : '', h("div", { class: "data-hidden" }, h("div", { "data-attribute": "hero-title" }, this.options.heroTitle ? this.options.heroTitle : ''), h("div", { "data-attribute": "main-title" }, this.options.mainTitle ? this.options.mainTitle : ''), h("div", { "data-attribute": "sub-title" }, this.options.subTitle ? this.options.subTitle : ''), h("div", { "data-attribute": "price" }, this.options.price ? this.formatPrice(this.options.price) : ''), h("div", { "data-attribute": "old-price" }, this.options.oldPrice ? this.formatPrice(this.options.oldPrice) : ''), h("div", { "data-attribute": "term" }, this.options.term ? this.options.term : ''), h("div", { "data-attribute": "term-text" }, this.options.termText ? this.options.termText : ''), h("div", { "data-attribute": "helper" }, this.options.helper ? this.options.helper : ''), h("div", { "data-attribute": "description" }, h("slot", { name: "description-slot" })), h("div", { "data-attribute": "custom-slot" }, h("slot", { name: "custom-slot" })), this.showBulletPoints ? (h("div", { "data-attribute": "bullet-points" }, this.options?.bulletPoints?.map((bulletpoint) => (h("div", null, bulletpoint))))) : (''), h("div", { "data-attribute": "divided-information" }, h("slot", { name: "divided-information-slot" })), this.options.pricePrefix ?
             h("div", { "data-attribute": "price-prefix" }, this.options.pricePrefix)
             : '', this.options.priceInfo ?
             h("div", { "data-attribute": "price-info" }, this.options.priceInfo)
             : '')));
     }
     render() {
-        var _a;
         const card = this.renderCard();
         if (this.thumbnail) {
-            return (h("div", { class: "card-wrapper js-card-wrapper" }, h("img", { src: this.thumbnail, class: "card-thumbnail", alt: (_a = this.thumbnailAlt) !== null && _a !== void 0 ? _a : '' }), card));
+            return (h("div", { class: "card-wrapper js-card-wrapper" }, h("img", { src: this.thumbnail, class: "card-thumbnail", alt: this.thumbnailAlt ?? '' }), card));
         }
         return card;
     }
-    get host() { return this; }
     static get style() { return TetCompareCardStyle0; }
 }, [1, "tet-compare-card", {
         "clickCallback": [16],

package/dist/components/tet-accordion.js

@@ -1,4 +1,4 @@
-import { T as TetAccordion$1, d as defineCustomElement$1 } from './p-53ca0a91.js';
+import { T as TetAccordion$1, d as defineCustomElement$1 } from './p-d3939d35.js';
 
 const TetAccordion = TetAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tet-address-offers-filters-products.js

@@ -1,4 +1,4 @@
-import { T as TetAddressOffersFiltersProducts$1, d as defineCustomElement$1 } from './p-6b7e73c0.js';
+import { T as TetAddressOffersFiltersProducts$1, d as defineCustomElement$1 } from './p-33725ec2.js';
 
 const TetAddressOffersFiltersProducts = TetAddressOffersFiltersProducts$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tet-address-offers-filters.js

@@ -1,4 +1,4 @@
-import { T as TetAddressOffersFilters$1, d as defineCustomElement$1 } from './p-029ff2b3.js';
+import { T as TetAddressOffersFilters$1, d as defineCustomElement$1 } from './p-b3001877.js';
 
 const TetAddressOffersFilters = TetAddressOffersFilters$1;
 const defineCustomElement = defineCustomElement$1;