@tet/tet-components 1.4.140-testing → 1.4.141-testing

package/dist/collection/components/advanced/cards/tet-assembler/tet-assembler.js

@@ -450,6 +450,15 @@ export class TetAssembler {
             primaryButtonUrl: this.getProductFormUrl(product, contractTerm, selectedContractTermId)
         });
     }
+    /** Returns the current selection and summary without emitting assemblerChange. */
+    async getSelection() {
+        return {
+            selectedContractTermId: this.selectedContractTermId,
+            selectedSwitchKeys: [...this.selectedSwitchKeys],
+            selectedProductCode: this.selectedProductCode,
+            summary: { ...this.currentSummary }
+        };
+    }
     emitChange(source, changedKey, selectedContractTermId = this.selectedContractTermId, selectedSwitchKeys = this.selectedSwitchKeys, summary = this.currentSummary) {
         this.assemblerChange.emit({
             source,
@@ -769,13 +778,13 @@ export class TetAssembler {
             !!this.getResolvedCollapsedDescription();
         const hasContractSidePanel = Boolean(expandableSection?.items.some((item) => item.type === 'contract_term'));
         const hasInformationalSidePanel = this.hasInformationalSidePanel();
-        return (h(Host, { key: 'a98123059b011688e09f14b6f8ba4499569fd5f1' }, h("div", { key: 'd50958095c9606378b17f7c8ea3202fd137d1eae', class: {
+        return (h(Host, { key: '4e828a530bf518148a4848e073910ca9b0a38234' }, h("div", { key: 'c8fd3dac1ebe6f2f43ceb1cde520b0d9d837ff41', class: {
                 'assembler-layout': true,
                 'has-contract-side-panel': hasContractSidePanel,
                 'has-informational-side-panel': hasInformationalSidePanel,
                 'has-side-panel': hasSidePanel,
                 'is-expanded': this.expanded
-            } }, this.renderSidePanel(), h("div", { key: '238a7487bd704f20a3dd5f3a7b23fcfe525123ae', class: "assembler" }, h("div", { key: '4994d6ee1ff782b3c29d51fdd30e3706c0ac49b9', class: "assembler__configuration" }, h("div", { key: '6410de6ecaf427c3e8957102efd29432d9b1f117', class: "assembler__content" }, visibleSections.map((section) => this.renderSection(section)))), this.renderSummary()))));
+            } }, this.renderSidePanel(), h("div", { key: '85df750dc67e4b96c881021c25c97d57cd4ef087', class: "assembler" }, h("div", { key: 'dbc219c05a8c32df0be8b063683cff8afc1827dd', class: "assembler__configuration" }, h("div", { key: '319099df513b590fad405011bb2a036ebc2f4564', class: "assembler__content" }, visibleSections.map((section) => this.renderSection(section)))), this.renderSummary()))));
     }
     static get is() { return "tet-assembler"; }
     static get encapsulation() { return "shadow"; }
@@ -917,6 +926,36 @@ export class TetAssembler {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getSelection": {
+                "complexType": {
+                    "signature": "() => Promise<Omit<AssemblerChangeEventInterface, \"source\" | \"changedKey\">>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "AssemblerChangeEventInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-assembler/tet-assembler.tsx",
+                            "id": "src/components/advanced/cards/tet-assembler/tet-assembler.tsx::AssemblerChangeEventInterface"
+                        }
+                    },
+                    "return": "Promise<Omit<AssemblerChangeEventInterface, \"source\" | \"changedKey\">>"
+                },
+                "docs": {
+                    "text": "Returns the current selection and summary without emitting assemblerChange.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.js

@@ -214,6 +214,10 @@ export class TetCompareCardV3 {
             return [...productOptions, ...(option.dropdownOptions?.length ? option.dropdownOptions : [option])];
         }, []);
     }
+    /** Returns whether the initial loaded render has completed and cardLoaded has been emitted. */
+    async isLoaded() {
+        return this.didEmitCardLoaded;
+    }
     /** Returns loaded API product data with a complete form URL for each contract term. */
     async getProductByCode(code) {
         const option = this.getProductOptions().find(option => option.productCode === code);
@@ -625,10 +629,10 @@ export class TetCompareCardV3 {
             ? this.getCompleteUrl(manualProductData.formUrl, null)
             : this.getCompleteUrl(baseUrl, selectedOption?.productCode ?? '', contractTermData);
         const titleBadgeText = selectedOption?.titleBadge;
-        return (h("div", { class: "content content__top" }, (mainTitle || titleBadgeText) && (h("div", { class: "title-container" }, mainTitle && h("h3", { class: "title" }, mainTitle), titleBadgeText && (h("span", { class: "title-badge" }, h("tet-icon", { class: "title-badge__icon", name: "tc-info-circle" }), titleBadgeText)))), this.renderPrice(priceData), this.renderCardLabel(selectedOption), h("div", { class: "button-wrapper" }, h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle)), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))));
+        return (h("div", { key: "content-top", class: "content content__top" }, (mainTitle || titleBadgeText) && (h("div", { class: "title-container" }, mainTitle && h("h3", { class: "title" }, mainTitle), titleBadgeText && (h("span", { class: "title-badge" }, h("tet-icon", { class: "title-badge__icon", name: "tc-info-circle" }), titleBadgeText)))), this.renderPrice(priceData), this.renderCardLabel(selectedOption), h("div", { class: "button-wrapper" }, h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle)), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))));
     }
     renderContentBottom() {
-        return (h("div", { class: "content content__bottom" }, this.showControlsFirst
+        return (h("div", { key: "content-bottom", class: "content content__bottom" }, this.showControlsFirst
             ? [this.renderControls(), this.renderBonuses()]
             : [this.renderBonuses(), this.renderControls()]));
     }
@@ -655,7 +659,7 @@ export class TetCompareCardV3 {
         return (h("tet-placeholder", { class: { 'card__placeholder': true, 'single-card': this.cardType === 'single-card' }, height: "100%", width: "100%", darkTheme: this.theme === 'dark' }));
     }
     render() {
-        return (h(Host, { key: 'bdb678ad96f88995c307d7cdf4b22ab4cbfe2a09', "data-contains-focusable-content": true }, this.showLoader ? this.renderLoader() : this.renderCard()));
+        return (h(Host, { key: '681b0b3acd21c3eeb254b3789708ac511f6c8cf9', "data-contains-focusable-content": true }, this.showLoader ? this.renderLoader() : this.renderCard()));
     }
     static get is() { return "tet-compare-card-v3"; }
     static get encapsulation() { return "shadow"; }
@@ -1088,6 +1092,23 @@ export class TetCompareCardV3 {
     }
     static get methods() {
         return {
+            "isLoaded": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the initial loaded render has completed and cardLoaded has been emitted.",
+                    "tags": []
+                }
+            },
             "getProductByCode": {
                 "complexType": {
                     "signature": "(code: string) => Promise<ProductComparisonWithCompleteUrl | undefined>",

package/dist/collection/components/simple/misc/tet-sticky-offer/tet-sticky-offer.css

@@ -354,15 +354,14 @@
   display: block;
   max-width: 113.5rem;
   position: fixed;
-  bottom: var(--bottom-offset);
+  bottom: calc(var(--bottom-offset) + var(--boundary-bottom, 0rem));
   right: 0.5rem;
   left: 0.5rem;
   z-index: 10;
   margin: 0 auto;
-  transform: translateY(calc(100% + var(--bottom-offset) + 0.125rem));
-  visibility: hidden;
+  transform: translateY(calc(100% + var(--bottom-offset) + var(--boundary-bottom, 0rem) + 0.125rem));
   pointer-events: none;
-  transition: transform var(--animation-duration) ease, visibility 0s linear var(--animation-duration);
+  transition: transform var(--animation-duration) ease;
 }
 @media screen and (min-width: 31.25rem) {
   :host {
@@ -376,37 +375,47 @@
     left: 2rem;
   }
 }
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 90rem) {
   :host {
     right: 2.25rem;
     left: 2.25rem;
   }
 }
 
-:host([visible]:not(.scroll-hidden)) {
+:host(.offer-docked) {
+  position: relative;
+  left: var(--dock-left);
+  right: auto;
+  width: var(--dock-width);
+  bottom: auto;
+  margin: 0;
+}
+
+:host(.offer-visible) {
   transform: translateY(0);
-  visibility: visible;
   pointer-events: auto;
-  transition: visibility 0s;
+  transition: none;
   animation: sticky-offer-slide-in var(--animation-duration) ease;
 }
 
-:host([visible].scroll-hidden) {
+:host(.offer-visible) .sticky-offer {
   visibility: visible;
-}
-
-:host([visible]:not(.scroll-hidden)) .sticky-offer {
+  transition: visibility 0s;
   box-shadow: 0 4px 28.8px 0 rgba(0, 0, 0, 0.25);
 }
 
 @media (prefers-reduced-motion: reduce) {
   :host,
-  :host([visible]:not(.scroll-hidden)) {
+  :host(.offer-visible),
+  .sticky-offer,
+  :host(.offer-visible) .sticky-offer {
     transition: none;
     animation: none;
   }
 }
 .sticky-offer {
+  visibility: hidden;
+  transition: visibility 0s linear var(--animation-duration);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

package/dist/collection/components/simple/misc/tet-sticky-offer/tet-sticky-offer.js

@@ -1,13 +1,9 @@
 import { h, Host } from "@stencil/core";
-const HIDE_SCROLL_DISTANCE = 205;
-const SHOW_SCROLL_DISTANCE = 24;
 /** Offer anchored to the bottom of the viewport. */
 export class TetStickyOffer {
     host;
     /** Shows the offer when true and slides it out of view when false. */
     visible = true;
-    /** Hides the offer after scrolling down and shows it when scrolling up. Set to false to disable. */
-    hideOnScroll = true;
     /** Offer name displayed in the banner. */
     offerName = '';
     /** Formatted price amount, without the suffix. */
@@ -20,93 +16,158 @@ export class TetStickyOffer {
     actionUrl = '';
     /** Browsing context for actionUrl when it is set. */
     actionTarget = '_self';
-    scrollHidden = false;
+    /** Scrolling element whose top must pass above the top boundary's bottom before the offer appears. */
+    triggerElement;
+    /** Element whose bottom defines the visibility threshold when a trigger is provided. Defaults to the viewport top. */
+    topBoundaryElement;
+    /** Footer before which the offer docks, matching the preceding module's bottom padding. */
+    bottomBoundaryElement;
     /** Emitted when the offer action is activated. */
     applyClick;
-    lastScrollY = 0;
-    lastDocumentHeight = 0;
-    scrollDistance = 0;
-    scrollDirection = 0;
-    scrollFrame = null;
-    connectedCallback() {
-        this.resetScrollVisibility();
+    boundaryVisible = true;
+    boundaryBottom = 0;
+    docked = false;
+    dockingSpace;
+    moving = false;
+    fixedBottomOffset = 0;
+    refreshDockSize = false;
+    boundaryObserver;
+    boundaryFrame = null;
+    hasLoaded = false;
+    detectedModule = null;
+    componentWillLoad() {
+        this.updateBoundaries();
     }
-    disconnectedCallback() {
-        if (this.scrollFrame !== null) {
-            cancelAnimationFrame(this.scrollFrame);
-            this.scrollFrame = null;
-        }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.setupDockingSpace();
     }
-    resetScrollVisibility() {
-        if (this.scrollFrame !== null) {
-            cancelAnimationFrame(this.scrollFrame);
-            this.scrollFrame = null;
+    connectedCallback() {
+        if (this.hasLoaded && !this.moving) {
+            this.setupDockingSpace();
         }
-        this.scrollHidden = false;
-        this.scrollDistance = 0;
-        this.scrollDirection = 0;
-        this.lastScrollY = Math.max(0, window.scrollY);
-        this.lastDocumentHeight = this.getDocumentHeight();
     }
-    onWindowScroll() {
-        if (!this.visible || !this.hideOnScroll || this.scrollFrame !== null) {
+    disconnectedCallback() {
+        if (this.moving) {
             return;
         }
-        this.scrollFrame = requestAnimationFrame(() => this.updateScrollVisibility());
+        this.dockingSpace?.remove();
+        this.dockingSpace = undefined;
+        this.detectedModule = null;
+        this.docked = false;
+        this.host.classList.remove('offer-docked');
+        this.boundaryObserver?.disconnect();
+        if (this.boundaryFrame !== null) {
+            cancelAnimationFrame(this.boundaryFrame);
+            this.boundaryFrame = null;
+        }
     }
-    updateScrollVisibility() {
-        this.scrollFrame = null;
-        const scrollY = Math.max(0, window.scrollY);
-        const documentHeight = this.getDocumentHeight();
-        if (documentHeight !== this.lastDocumentHeight) {
-            this.lastDocumentHeight = documentHeight;
-            this.lastScrollY = scrollY;
-            this.scrollDistance = 0;
-            this.scrollDirection = 0;
+    setupDockingSpace() {
+        if (!this.hasLoaded || this.dockingSpace) {
             return;
         }
-        const delta = scrollY - this.lastScrollY;
-        this.lastScrollY = scrollY;
-        if (scrollY === 0) {
-            this.scrollDistance = 0;
-            this.scrollDirection = 0;
-            this.scrollHidden = false;
-            return;
+        if (this.bottomBoundaryElement?.parentNode) {
+            this.dockingSpace = document.createElement('div');
+            this.dockingSpace.style.boxSizing = 'border-box';
+            this.bottomBoundaryElement.parentNode.insertBefore(this.dockingSpace, this.bottomBoundaryElement);
+            this.moving = true;
+            try {
+                this.dockingSpace.appendChild(this.host);
+            }
+            finally {
+                this.moving = false;
+            }
         }
-        const direction = Math.sign(delta);
-        if (!direction) {
+        this.observeBoundaries();
+    }
+    observeBoundaries() {
+        if (!this.hasLoaded) {
             return;
         }
-        if (document.activeElement === this.host || this.host.contains(document.activeElement)) {
-            this.scrollDistance = 0;
-            return;
+        this.boundaryObserver?.disconnect();
+        if (this.triggerElement || this.bottomBoundaryElement) {
+            this.boundaryObserver = new ResizeObserver(() => this.scheduleBoundaryUpdate(true));
+            const elements = [this.host, this.triggerElement, this.topBoundaryElement, this.bottomBoundaryElement, document.body];
+            for (const element of elements) {
+                if (element) {
+                    this.boundaryObserver.observe(element);
+                }
+            }
         }
-        this.scrollDistance = direction === this.scrollDirection
-            ? this.scrollDistance + Math.abs(delta)
-            : Math.abs(delta);
-        this.scrollDirection = direction;
-        if (direction > 0 && !this.scrollHidden && this.scrollDistance >= HIDE_SCROLL_DISTANCE) {
-            this.scrollHidden = true;
+        this.updateBoundaries();
+    }
+    updateBoundaries() {
+        this.boundaryVisible = this.triggerElement
+            ? this.triggerElement.getBoundingClientRect().top <= (this.topBoundaryElement?.getBoundingClientRect().bottom ?? 0)
+            : true;
+        if (this.dockingSpace) {
+            this.boundaryBottom = 0;
+            this.updateDocking();
+            return;
         }
-        else if (direction < 0 && this.scrollHidden && this.scrollDistance >= SHOW_SCROLL_DISTANCE) {
-            this.scrollHidden = false;
+        this.boundaryBottom = this.bottomBoundaryElement
+            ? Math.max(0, window.innerHeight - this.bottomBoundaryElement.getBoundingClientRect().top)
+            : 0;
+    }
+    onScroll() {
+        if (this.dockingSpace) {
+            this.updateBoundaries();
         }
         else {
+            this.scheduleBoundaryUpdate();
+        }
+    }
+    onResize() {
+        this.scheduleBoundaryUpdate(true);
+    }
+    scheduleBoundaryUpdate(refreshDockSize = false) {
+        this.refreshDockSize ||= refreshDockSize;
+        if ((!this.triggerElement && !this.bottomBoundaryElement) || this.boundaryFrame !== null) {
             return;
         }
-        this.scrollDistance = 0;
+        this.boundaryFrame = requestAnimationFrame(() => {
+            this.boundaryFrame = null;
+            this.updateBoundaries();
+            this.refreshDockSize = false;
+        });
     }
-    getDocumentHeight() {
-        return Math.max(document.documentElement.scrollHeight ?? 0, document.body?.scrollHeight ?? 0);
+    updateDocking() {
+        if (!this.dockingSpace)
+            return;
+        const space = this.dockingSpace;
+        const spaceRect = space.getBoundingClientRect();
+        const module = this.getModuleAboveDock(spaceRect);
+        if (!this.docked || this.refreshDockSize) {
+            this.host.classList.remove('offer-docked');
+            const rect = this.host.getBoundingClientRect();
+            this.fixedBottomOffset = Number.parseFloat(getComputedStyle(this.host).bottom) || 0;
+            space.style.setProperty('--dock-left', `${rect.left - spaceRect.left}px`);
+            space.style.setProperty('--dock-width', `${rect.width}px`);
+            if (this.docked) {
+                this.host.classList.add('offer-docked');
+            }
+        }
+        const gap = (module ? Number.parseFloat(getComputedStyle(module).paddingBottom) : 0) || this.fixedBottomOffset;
+        const height = this.host.getBoundingClientRect().height;
+        const show = this.visible && this.boundaryVisible;
+        space.style.minHeight = `${show ? height + gap : 0}px`;
+        space.style.paddingBottom = `${show ? gap : 0}px`;
+        const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+        this.docked = show && spaceRect.top <= viewportHeight - height - this.fixedBottomOffset;
+        this.host.classList[this.docked ? 'add' : 'remove']('offer-docked');
     }
-    onFocusIn() {
-        if (this.scrollHidden) {
-            this.scrollHidden = false;
-            this.scrollDistance = 0;
+    getModuleAboveDock(rect) {
+        const module = document.elementsFromPoint(rect.left + rect.width / 2, rect.top - 1)
+            .filter(element => element !== this.host && !this.host.contains(element) && element !== this.dockingSpace)
+            .map(element => element.closest('.module-inner'))
+            .find(element => element && element.getBoundingClientRect().height > 0);
+        if (module) {
+            this.detectedModule = module;
         }
+        return this.detectedModule;
     }
     render() {
-        return (h(Host, { key: 'cee22e0817476a55e3f38f33fbcc1217469bf196', class: { 'scroll-hidden': this.scrollHidden } }, h("div", { key: '7f28335ce0e9fe33b567d4dd46b31df4bcaedc2e', class: "sticky-offer", inert: !this.visible, onFocusin: () => this.onFocusIn() }, h("span", { key: '9d1c54f6d8d2b674634e741cdec8d2ba98d1d600', class: "sticky-offer__name", "aria-live": "polite", "aria-atomic": "true" }, this.offerName), h("div", { key: '9cded6e4fd98e352b12b15db525506894616e762', class: "sticky-offer__inner-container" }, h("div", { key: '12f14c8840e895d4511a1c97379d9c561470d9bf', class: "sticky-offer__price-container", "aria-live": "polite", "aria-atomic": "true" }, h("span", { key: '2461ff768954fd2aa4f1f5e8e783ca0d8e4244c9', class: "sticky-offer__price" }, this.price), this.priceSuffix && (h("span", { key: '8ad22116b920ee1f63d1070bef4e4b49d08f9f8f', class: "sticky-offer__price-suffix" }, this.priceSuffix))), h("tet-button", { key: '96dcd941d0393948ee21aff797a756aff216a909', size: "small", theme: "light", breakpointConfig: {
+        return (h(Host, { key: '050e9efaa967642b61ef5af7af8a4352a46677f1', class: { 'offer-visible': this.visible && this.boundaryVisible }, style: { '--boundary-bottom': `${this.boundaryBottom}px` } }, h("div", { key: 'ca93b30409a5adb481d88197268981e4942730f3', class: "sticky-offer", inert: !this.visible || !this.boundaryVisible }, h("span", { key: 'b7f96b13d94d9138ccf6bd221c67a49bb57ab479', class: "sticky-offer__name", "aria-live": "polite", "aria-atomic": "true" }, this.offerName), h("div", { key: '9522bf5ad6df226b09ff3cc338217d2863c883f8', class: "sticky-offer__inner-container" }, h("div", { key: 'c7650ad7d5b115a51dfc0f510febb7a9116d57bb', class: "sticky-offer__price-container", "aria-live": "polite", "aria-atomic": "true" }, h("span", { key: '56a29f81f29d3ef7acced8755dbd327b895d4901', class: "sticky-offer__price" }, this.price), this.priceSuffix && (h("span", { key: '20c863ee368d698e4ec34c009914306feb33a719', class: "sticky-offer__price-suffix" }, this.priceSuffix))), h("tet-button", { key: '871d4e641f1c507656f10343dce8abc919922c85', size: "small", theme: "light", breakpointConfig: {
                 lg: { size: 'medium' },
                 xl: { size: 'large' },
             }, url: this.actionUrl, urlTarget: this.actionTarget, onClick: () => this.applyClick.emit() }, this.actionLabel)))));
@@ -145,26 +206,6 @@ export class TetStickyOffer {
                 "attribute": "visible",
                 "defaultValue": "true"
             },
-            "hideOnScroll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Hides the offer after scrolling down and shows it when scrolling up. Set to false to disable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hide-on-scroll",
-                "defaultValue": "true"
-            },
             "offerName": {
                 "type": "string",
                 "mutable": false,
@@ -284,12 +325,79 @@ export class TetStickyOffer {
                 "reflect": false,
                 "attribute": "action-target",
                 "defaultValue": "'_self'"
+            },
+            "triggerElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Scrolling element whose top must pass above the top boundary's bottom before the offer appears."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "topBoundaryElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element whose bottom defines the visibility threshold when a trigger is provided. Defaults to the viewport top."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "bottomBoundaryElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer before which the offer docks, matching the preceding module's bottom padding."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "scrollHidden": {}
+            "boundaryVisible": {},
+            "boundaryBottom": {}
         };
     }
     static get events() {
@@ -313,17 +421,29 @@ export class TetStickyOffer {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "visible",
-                "methodName": "resetScrollVisibility"
+                "propName": "bottomBoundaryElement",
+                "methodName": "setupDockingSpace"
+            }, {
+                "propName": "triggerElement",
+                "methodName": "observeBoundaries"
+            }, {
+                "propName": "topBoundaryElement",
+                "methodName": "observeBoundaries"
             }, {
-                "propName": "hideOnScroll",
-                "methodName": "resetScrollVisibility"
+                "propName": "visible",
+                "methodName": "updateBoundaries"
             }];
     }
     static get listeners() {
         return [{
                 "name": "scroll",
-                "method": "onWindowScroll",
+                "method": "onScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "onResize",
                 "target": "window",
                 "capture": false,
                 "passive": true