@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/locations/header/Header.js

@@ -0,0 +1,353 @@
+import { HEADER_HEIGHT_CSS_VARIABLE, DEFAULT_OFFERS_Z_INDEX, HEADER_INCLUDE_ELEMENT_DATA_ATTRIBUTE, HOST_LOCATION_ATTRIBUTE, HEADER_IGNORE_ELEMENT_DATA_ATTRIBUTE } from "../../../constants.js";
+import { getHostId, toHTMLElement } from "../../../utils.js";
+import { CSSVarsManager } from "../CSSVarsManager.js";
+import { ElementResizeObserver } from "../ElementResizeObserver.js";
+import { ElementStyleChangeObserver } from "./ElementStyleChangeObserver.js";
+import { ExternalStyleManager } from "./ExternalStyleManager.js";
+import { MatchingElementsObserver } from "./MatchingElementsObserver.js";
+import { SelectorObserver } from "./SelectorObserver.js";
+import { StyleElementManager } from "./StyleElementManager.js";
+import { StyleSelectorObserver } from "./StyleSelectorObserver/StyleSelectorObserver.js";
+import { InlineStyleManager } from "./InlineStyleManager.js";
+import { ShiftedElementsManager } from "./ShiftedElementsManager.js";
+import { SelectorObservable } from "./SelectorObservable.js";
+
+/* eslint-disable rulesdir/css-units */ /* eslint-disable rulesdir/enforce-comment */ /* eslint-disable no-continue */ 
+
+
+
+
+
+
+
+
+
+
+
+
+const SHIFTED_ELEMENT_DATA_ATTRIBUTE = "qualified-offer-header-shifted-element";
+class Header {
+    static get ignoredSelectors() {
+        return this._ignoredSelectors;
+    }
+    static get includedSelectors() {
+        return this._includedSelectors;
+    }
+    static async setup(config) {
+        if (this.isInitialized) return;
+        if ("registerProperty" in window.CSS) {
+            // This is needed for the animations to work with the custom property
+            window.CSS.registerProperty({
+                name: HEADER_HEIGHT_CSS_VARIABLE,
+                syntax: "<length>",
+                inherits: true,
+                initialValue: "0px"
+            });
+        }
+        if (config) {
+            StyleSelectorObserver.setConfig(config);
+            ElementStyleChangeObserver.setConfig(config);
+        }
+        if (config == null ? void 0 : config.excludedSelectors) {
+            this._ignoredSelectors += ",:is(" + config.excludedSelectors + ")";
+        }
+        if (config == null ? void 0 : config.includedSelectors) {
+            this._includedSelectors += ",:is(" + config.includedSelectors + ")";
+        }
+        await StyleSelectorObserver.getInstance().load();
+        this.isInitialized = true;
+    }
+    createHost(id) {
+        // Style is inline because the host is directly inserted into the DOM. (no shadow root)
+        const hostId = getHostId(id);
+        const html = /* html */ '\n      <div id="' + hostId + '" style="position:fixed;left:0;top:0;width:100%;height:fit-content;z-index:' + DEFAULT_OFFERS_Z_INDEX + '"></div>\n    ';
+        return toHTMLElement(html);
+    }
+    insertHost(host) {
+        this.initialize();
+        this.shiftedElementsManager.init();
+        this.insertHostInWebsite(host);
+        this.initHtmlOffsetStyles();
+        this.inlineStyleManager.init();
+        this.externalStyleManager.init();
+        this.prepareInitialShiftedElements();
+        this.styles.get("externalStylesOffset").init();
+    }
+    afterInsertAnimation(host) {
+        // Restore initial shifted elements
+        this.restoreInitialShiftedElements == null ? void 0 : this.restoreInitialShiftedElements.call(this);
+        // Ensure stylesheets are enabled
+        this.updateHeaderHeight(host);
+        // Init observers
+        this.selectorObserver.init();
+        this.matchingElementsObserver.init({
+            initialElements: this.shiftedElementsManager.elements
+        });
+        this.hostResizeObserver.init(host);
+    }
+    beforeRemoveAnimation() {
+        // Dispose observers
+        this.selectorObserver.dispose();
+        this.matchingElementsObserver.dispose();
+        this.hostResizeObserver.dispose();
+        // Disable transitions for the shifted elements
+        this.prepareExitShiftedElements();
+    }
+    removeHost(host) {
+        host.remove();
+        this.shiftedElementsManager.dispose();
+        this.externalStyleManager.dispose();
+        this.inlineStyleManager.dispose();
+        this.styles.dispose();
+        this.cssVars.dispose();
+        // Restore transitions for the shifted elements
+        this.restoreExitShiftedElements == null ? void 0 : this.restoreExitShiftedElements.call(this);
+    }
+    initialize() {
+        if (this.isInitialized) return;
+        this.selectorObserver = this.createSelectorObserver();
+        this.matchingElementsObserver = new MatchingElementsObserver(this.selectorObserver, this.handleMatchingElements);
+        this.hostResizeObserver = new ElementResizeObserver(this.updateHeaderHeight, "height", (/* inlined export .RESIZE_THROTTLE_MS */250));
+        this.externalStyleManager = new ExternalStyleManager({
+            property: "top",
+            styleElement: this.styles.get("externalStylesOffset"),
+            offsetCssValue: "var(" + HEADER_HEIGHT_CSS_VARIABLE + ", 0px)",
+            dataAttribute: SHIFTED_ELEMENT_DATA_ATTRIBUTE
+        });
+        this.inlineStyleManager = new InlineStyleManager({
+            property: "top",
+            offsetCssValue: "var(" + HEADER_HEIGHT_CSS_VARIABLE + ", 0px)"
+        });
+        this.shiftedElementsManager = new ShiftedElementsManager({
+            dataAttribute: SHIFTED_ELEMENT_DATA_ATTRIBUTE
+        });
+        this.isInitialized = true;
+    }
+    insertHostInWebsite(host) {
+        document.body.insertBefore(host, document.body.firstElementChild);
+    }
+    initHtmlOffsetStyles() {
+        const { marginTop, minHeight } = window.getComputedStyle(document.documentElement);
+        this.styles.get("htmlOffset").init({
+            rules: [
+                /* css */ "html {\n          " + // If the min height is 100% we don't want to set the height of the html element
+                // because it will break the layout of the website
+                (minHeight === "100%" ? "" : "height: calc(100dvh - " + marginTop + " - var(" + HEADER_HEIGHT_CSS_VARIABLE + ")) !important;") + "\n          margin-top: calc(" + marginTop + " + var(" + HEADER_HEIGHT_CSS_VARIABLE + ")) !important;\n          top: 0 !important;\n          position: relative !important;\n          overflow-y: visible !important;\n        }"
+            ]
+        });
+    }
+    prepareInitialShiftedElements() {
+        // TODO: Watch for race conditions in case the SelectorObserver is not ready in time (event with lazy loading)
+        const { restoreTransitions } = this.handleMatchingElements({
+            added: document.querySelectorAll(this.selectorObserver.current.value),
+            removed: [],
+            changed: []
+        }, {
+            shouldRestoreTransitions: false
+        });
+        this.restoreInitialShiftedElements = ()=>{
+            restoreTransitions();
+            this.restoreInitialShiftedElements = null;
+        };
+    }
+    prepareExitShiftedElements() {
+        var _this_shiftedElementsManager_elements;
+        if (!((_this_shiftedElementsManager_elements = this.shiftedElementsManager.elements) == null ? void 0 : _this_shiftedElementsManager_elements.size)) return;
+        const map = new Map();
+        for (const element of this.shiftedElementsManager.elements){
+            const { transition } = window.getComputedStyle(element);
+            map.set(element, {
+                transition
+            });
+        }
+        const restoreTransitions = this.disableTransitions([
+            map
+        ]);
+        this.restoreExitShiftedElements = ()=>{
+            restoreTransitions();
+            this.restoreExitShiftedElements = null;
+        };
+    }
+    processMatchingElements(elements) {
+        const added = new Map();
+        const changed = new Map();
+        const removed = new Map();
+        for (const element of elements.added){
+            if (this.shiftedElementsManager.has(element)) continue;
+            const { position, transition } = window.getComputedStyle(element);
+            if (!this.shouldShiftElement(element, position)) {
+                continue;
+            }
+            added.set(element, {
+                position,
+                transition
+            });
+        }
+        for (const element of elements.changed){
+            const { position, transition } = window.getComputedStyle(element);
+            if (!this.shouldShiftElement(element, position)) {
+                removed.set(element, {
+                    position,
+                    transition
+                });
+                continue;
+            }
+            if (!this.shiftedElementsManager.has(element)) {
+                added.set(element, {
+                    position,
+                    transition
+                });
+                continue;
+            }
+            changed.set(element, {
+                position,
+                transition
+            });
+        }
+        for (const element of elements.removed){
+            if (!this.shiftedElementsManager.has(element)) continue;
+            const { position, transition } = window.getComputedStyle(element);
+            removed.set(element, {
+                position,
+                transition
+            });
+        }
+        return {
+            added,
+            changed,
+            removed
+        };
+    }
+    addElement(element) {
+        this.shiftedElementsManager.add(element);
+        this.inlineStyleManager.add(element);
+    }
+    updateElement(element) {
+        this.inlineStyleManager.update(element);
+    }
+    removeElement(element) {
+        this.inlineStyleManager.remove(element);
+        this.shiftedElementsManager.remove(element);
+    }
+    // Selector matching is not enough to determine if an element should be shifted
+    // Since the element could be matched due to a media query that is not currently active
+    // We need to check the computed style of the element to determine if it should be shifted
+    shouldShiftElement(element, position) {
+        if (element.hasAttribute(HEADER_IGNORE_ELEMENT_DATA_ATTRIBUTE)) {
+            return false;
+        }
+        if (element.hasAttribute(HEADER_INCLUDE_ELEMENT_DATA_ATTRIBUTE)) {
+            return true;
+        }
+        if (position !== "fixed" && position !== "sticky") {
+            return false;
+        }
+        return true;
+    }
+    createSelectorObserver() {
+        return new SelectorObserver((selectors)=>{
+            const fixedRules = selectors.get("position:fixed").rules;
+            const stickyRules = selectors.get("position:sticky").rules;
+            return new SelectorObservable([
+                ...fixedRules,
+                ...stickyRules
+            ], Header.includedSelectors, Header.ignoredSelectors);
+        }, [
+            "position:fixed",
+            "position:sticky"
+        ]);
+    }
+    disableTransitions(elementsIterable) {
+        const map = new Map();
+        for (const elements of elementsIterable){
+            for (const [element, { transition }] of elements){
+                if (transition !== "none" && transition !== "") {
+                    map.set(element, {
+                        value: element.style.getPropertyValue("transition"),
+                        priority: element.style.getPropertyPriority("transition")
+                    });
+                }
+            }
+        }
+        for (const element of map.keys()){
+            element.style.setProperty("transition", "none", "important");
+        }
+        const restoreTransitions = ()=>{
+            for (const [element, { value, priority }] of map.entries()){
+                if (!value) {
+                    element.style.removeProperty("transition");
+                } else {
+                    element.style.setProperty("transition", value, priority);
+                }
+            }
+        };
+        return restoreTransitions;
+    }
+    constructor(){
+        this.styles = StyleElementManager.get("header");
+        this.cssVars = CSSVarsManager.get("header");
+        this.isInitialized = false;
+        this.restoreInitialShiftedElements = null;
+        this.restoreExitShiftedElements = null;
+        this.updateHeaderHeight = (host)=>{
+            this.cssVars.set(HEADER_HEIGHT_CSS_VARIABLE, "" + host.offsetHeight + "px");
+        };
+        this.handleMatchingElements = (elements, param)=>{
+            let { shouldRestoreTransitions = true } = param === void 0 ? {} : param;
+            this.matchingElementsObserver.pauseChangeObserver();
+            const { added, changed, removed } = this.processMatchingElements(elements);
+            const restoreTransitions = this.disableTransitions([
+                added,
+                changed,
+                removed
+            ]);
+            try {
+                for (const [element] of added){
+                    this.addElement(element);
+                }
+                for (const [element] of changed){
+                    this.updateElement(element);
+                }
+                for (const [element] of removed){
+                    this.removeElement(element);
+                }
+            } finally{
+                if (shouldRestoreTransitions) {
+                    restoreTransitions();
+                }
+            }
+            this.matchingElementsObserver.resumeChangeObserver();
+            return {
+                restoreTransitions
+            };
+        };
+    }
+}
+Header.isInitialized = false;
+Header._ignoredSelectors = [
+    // This is the data attribute for all the offer hosts
+    "[" + HOST_LOCATION_ATTRIBUTE + "]",
+    // We want to ignore all the elements that are used as dialogs
+    "dialog",
+    '[role="dialog"]',
+    // We want to ignore our widget/lightbox
+    "#q-messenger-frame",
+    // We want to ignore our multimodal widget
+    "#qualified-multimodal-host",
+    // We want to ignore the Docked skeleton
+    "#q-docked-skeleton",
+    // We want to ignore all the elements that includes the specified data attribute
+    "[" + HEADER_IGNORE_ELEMENT_DATA_ATTRIBUTE + "]"
+].join(",");
+Header._includedSelectors = [
+    // We want to include elements with fixed/sticky style attributes
+    '*[style*="position:fixed"]',
+    '*[style*="position: fixed"]',
+    '*[style*="position:sticky"]',
+    '*[style*="position: sticky"]',
+    // We want to include all the elements that includes the specified data attribute
+    "[" + HEADER_INCLUDE_ELEMENT_DATA_ATTRIBUTE + "]"
+].join(",");
+
+var Header_SHIFTED_ELEMENT_DATA_ATTRIBUTE = /* unused export */ undefined;
+export { Header, Header_SHIFTED_ELEMENT_DATA_ATTRIBUTE as SHIFTED_ELEMENT_DATA_ATTRIBUTE };

package/routes/app/offers/scripts/rendering/locations/header/InlineStyleManager.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-continue */ // This CSS variable is not registered, it is only used to tell if we have already applied the offset
+// The variable is used like this var(--qualified-offer-header-inline-style-offset, <value>) this is equivalent to
+// Just using <value> but it allows us to tell if we have already applied the offset
+const OFFSET_VAR_NAME = "--qualified-offer-header-inline-style-offset";
+/**
+ * This manager is responsible for managing inline styles of shifted elements
+ *
+ * @example
+ *
+ * We have the following element somewhere in the document:
+ *
+ * <div class="test-selector" style="top: 10px;">
+ *   ...
+ * </div>
+ *
+ * We can now create an InlineStyleManager instance with the following options to offset the element:
+ *
+ * const manager = new InlineStyleManager({
+ *   property: "top",
+ *   offsetCssValue: "var(--shift-offset)",
+ * });
+ *
+ * The manager will now update the element's style to:
+ *
+ * <div class="test-selector" style="top: calc(10px + var(--shift-offset));">
+ *   ...
+ * </div>
+ *
+ */ class InlineStyleManager {
+    init() {
+        this.isDisposed = false;
+        this.elements.clear();
+    }
+    dispose() {
+        for (const [element, properties] of this.elements){
+            this.restoreElement(element, properties);
+        }
+        this.elements.clear();
+        this.isDisposed = true;
+    }
+    add(element) {
+        if (this.isDisposed || this.elements.has(element)) return;
+        const value = element.style.getPropertyValue(this.options.property);
+        if (!value) return;
+        const priority = element.style.getPropertyPriority(this.options.property);
+        this.elements.set(element, {
+            priority,
+            value
+        });
+        this.shiftElement(element, {
+            priority,
+            value
+        });
+    }
+    update(element) {
+        if (this.isDisposed) return;
+        if (!this.elements.has(element)) {
+            this.add(element);
+            return;
+        }
+        const value = element.style.getPropertyValue(this.options.property);
+        if (!value) {
+            this.elements.delete(element);
+            return;
+        }
+        if (value.includes(OFFSET_VAR_NAME)) return;
+        const priority = element.style.getPropertyPriority(this.options.property);
+        this.elements.set(element, {
+            priority,
+            value
+        });
+        this.shiftElement(element, {
+            priority,
+            value
+        });
+    }
+    remove(element) {
+        if (this.isDisposed || !this.elements.has(element)) return;
+        const { priority, value } = this.elements.get(element);
+        this.elements.delete(element);
+        if (element.style.getPropertyValue(this.options.property).includes(OFFSET_VAR_NAME)) {
+            this.restoreElement(element, {
+                priority,
+                value
+            });
+        }
+    }
+    restoreElement(element, properties) {
+        const { value, priority } = properties;
+        element.style.setProperty(this.options.property, value, priority);
+    }
+    shiftElement(element, properties) {
+        const { value, priority } = properties;
+        element.style.setProperty(this.options.property, "calc(" + value + " + var(" + OFFSET_VAR_NAME + ", " + this.options.offsetCssValue + "))", priority);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(options){
+        this.options = options;
+        this.isDisposed = true;
+        this.elements = new Map();
+    }
+}
+
+var InlineStyleManager_OFFSET_VAR_NAME = /* unused export */ undefined;
+export { InlineStyleManager, InlineStyleManager_OFFSET_VAR_NAME as OFFSET_VAR_NAME };

package/routes/app/offers/scripts/rendering/locations/header/MatchingElementsObserver.js

@@ -0,0 +1,107 @@
+import "../../../constants.js";
+import { ElementStyleChangeObserver } from "./ElementStyleChangeObserver.js";
+import { NewElementsObserver } from "./NewElementsObserver.js";
+import { WindowResizeObserver } from "./WindowResizeObserver.js";
+
+/* eslint-disable no-continue */ 
+
+
+
+/**
+ * Class used to keep track of all the elements that should (potentially) be shifted
+ * It uses multiple observers to keep track of the elements that are added, removed, and changed
+ */ class MatchingElementsObserver {
+    init(param) {
+        let { initialElements } = param === void 0 ? {} : param;
+        this.isDisposed = false;
+        this.newElementsObserver.init();
+        this.elementStyleChangeObserver.init();
+        this.windowResizeObserver.init();
+        this.observedElements.clear();
+        if (initialElements) {
+            this.addElements(initialElements);
+            this.onUpdateElements();
+        }
+    }
+    dispose() {
+        this.newElementsObserver.dispose();
+        this.elementStyleChangeObserver.dispose();
+        this.windowResizeObserver.dispose();
+        this.observedElements.clear();
+        this.isDisposed = true;
+    }
+    pauseChangeObserver() {
+        this.elementStyleChangeObserver.pause();
+    }
+    resumeChangeObserver() {
+        this.elementStyleChangeObserver.resume();
+    }
+    addElements(elements) {
+        for (const element of elements){
+            this.observedElements.add(element);
+        }
+        this.elementStyleChangeObserver.observe(elements);
+    }
+    removeElements(elements) {
+        for (const element of elements){
+            this.observedElements.delete(element);
+        }
+        this.elementStyleChangeObserver.unobserve(elements);
+    }
+    _callback(elements) {
+        if (this.isDisposed) return;
+        this.callback(elements);
+    }
+    constructor(selectorObserver, callback){
+        this.selectorObserver = selectorObserver;
+        this.callback = callback;
+        this.isDisposed = true;
+        this.observedElements = new Set();
+        this.onNewElements = (elements)=>{
+            if (this.isDisposed) return;
+            const added = [];
+            for (const element of elements){
+                if (this.observedElements.has(element) || !element.matches(this.selectorObserver.current.value)) {
+                    continue;
+                }
+                added.push(element);
+            }
+            if (added.length === 0) return;
+            this.addElements(added);
+            this._callback({
+                added,
+                removed: [],
+                changed: []
+            });
+        };
+        this.onUpdateElements = (elements)=>{
+            if (elements === void 0) elements = this.observedElements;
+            if (this.isDisposed) return;
+            const removed = [];
+            const changed = [];
+            const currentSelector = this.selectorObserver.current;
+            for (const element of elements){
+                if (!this.observedElements.has(element)) continue;
+                if (!element.matches(currentSelector.value)) {
+                    removed.push(element);
+                } else {
+                    changed.push(element);
+                }
+            }
+            if (removed.length === 0 && changed.length === 0) return;
+            this.removeElements(removed);
+            this._callback({
+                added: [],
+                removed,
+                changed
+            });
+        };
+        this.newElementsObserver = new NewElementsObserver(selectorObserver, this.onNewElements);
+        this.elementStyleChangeObserver = new ElementStyleChangeObserver([
+            "position"
+        ], this.onUpdateElements);
+        this.windowResizeObserver = new WindowResizeObserver(this.onUpdateElements, "width", (/* inlined export .RESIZE_THROTTLE_MS */250));
+    }
+}
+
+export { MatchingElementsObserver };

package/routes/app/offers/scripts/rendering/locations/header/NewElementsObserver.js

@@ -0,0 +1,129 @@
+import { __webpack_require__ } from "../../../../../../../js/runtime.js";
+import { AsyncBatchProcessor } from "./AsyncBatchProcessor.js";
+import { RuleWrapper } from "./RuleWrapper.js";
+import { StyleElementWrapper } from "./StyleElementWrapper.js";
+import "../../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var __nativeDocumentAddEventListener = __webpack_require__(68034).Qj;
+/* provided dependency */ var __nativeDocumentRemoveEventListener = __webpack_require__(68034).LA;
+
+
+
+/**
+ * A class that observes elements that match a given selector.
+ * It uses a CSS animation to detect when an element is added to the DOM
+ * and then calls a callback with the elements that match the selector.
+ * This is useful when we want to observe elements that are added to the DOM
+ * after the initial page load.
+ *
+ * Using the CSS animation is faster and less expensive
+ * than using a MutationObserver to observe the dom for a selector
+ *
+ * @example
+ *
+ * const observer = new NewElementsObserver(selectorObserver, (elements) => {
+ *   // Do something with the elements
+ * });
+ *
+ * Let's say we want to observe all the elements with the following rule and also all the elements with this selector .test
+ * The options will provide the following array [Rule, ".test"] where rule is the CSS rule below
+ *
+ * @media (max-width: 1000px) {
+ *   .fixed-header {
+ *     position: fixed;
+ *   }
+ * }
+ *
+ * The observer will generate the following style element:
+ *
+ * @keyframes qualified-offer-element-observer-animation-0 {}
+ *
+ * @media (max-width: 1000px) {
+ *   .fixed-header::after { animation: qualified-offer-element-observer-animation-0 1ms; content: "" }
+ * }
+ *
+ * .test::after { animation: qualified-offer-element-observer-animation-0 1ms; content: "" }
+ *
+ * What this does is that it will fire an animation any time an element that matches the options
+ * The observer listens for that specific animation and then calls the callback with the elements that match the options
+ */ class NewElementsObserver {
+    init() {
+        this.isDisposed = false;
+        this.selectorObserver.observe(this.onSelectorChange);
+        this.observe();
+    }
+    dispose() {
+        this.disconnect();
+        this.selectorObserver.unobserve(this.onSelectorChange);
+        this.isDisposed = true;
+    }
+    observe() {
+        __nativeDocumentAddEventListener("animationstart", this.eventHandler);
+        this.styleElement.init({
+            rules: this.getAllRules()
+        });
+    }
+    disconnect() {
+        __nativeDocumentRemoveEventListener("animationstart", this.eventHandler);
+        this.styleElement.dispose();
+        this.newElementsQueue.clearAndCancel();
+    }
+    getAllRules() {
+        const currentRules = [
+            this.selectorObserver.current.includedSelector,
+            ...this.selectorObserver.current.rules
+        ];
+        const ignoredSelector = ":is(" + this.selectorObserver.current.ignoredSelector + ")";
+        const rules = [
+            "@keyframes " + this.animationName + " {}"
+        ];
+        for (const rule of currentRules){
+            rules.push(this.getRule(rule, ignoredSelector));
+        }
+        return rules;
+    }
+    getRule(selectorRule, ignoredSelector) {
+        const selector = this.getSelector(selectorRule, ignoredSelector);
+        const wrapper = this.getWrapper(selectorRule);
+        const cssText = this.getCssText(selector);
+        return RuleWrapper.wrap(wrapper, cssText);
+    }
+    getSelector(selectorRule, ignoredSelector) {
+        const selector = typeof selectorRule === "string" ? selectorRule : selectorRule.selector;
+        return ":is(" + selector + "):not(" + ignoredSelector + ")";
+    }
+    getWrapper(selectorRule) {
+        return typeof selectorRule === "string" ? undefined : selectorRule.wrapper;
+    }
+    getCssText(selector) {
+        return selector + " { animation: " + this.animationName + " 1ms; }";
+    }
+    constructor(selectorObserver, callback){
+        this.selectorObserver = selectorObserver;
+        this.callback = callback;
+        this.animationName = "qualified-offer-element-observer-animation-" + NewElementsObserver.id++;
+        this.isDisposed = true;
+        this.styleElement = new StyleElementWrapper();
+        this.onSelectorChange = ()=>{
+            // Flush the queue and re-observe
+            this.newElementsQueue.executeImmediately();
+            this.disconnect();
+            this.observe();
+        };
+        this.eventHandler = (event)=>{
+            if (event.animationName === this.animationName && event.target instanceof HTMLElement) {
+                this.newElementsQueue.addAndSchedule(event.target);
+            }
+        };
+        this.processBatch = (elements)=>{
+            if (this.isDisposed || elements.length === 0) return;
+            this.callback([
+                ...new Set(elements)
+            ]);
+        };
+        this.newElementsQueue = new AsyncBatchProcessor(this.processBatch);
+    }
+}
+NewElementsObserver.id = 0;
+
+export { NewElementsObserver };