@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,182 @@
+import { _extends } from "../../../../../../../js/4101.js";
+
+
+/**
+ * CSSTransitionObserver automatically manages CSS transitions for specified properties
+ * and batches callback notifications when transitions start.
+ *
+ * This class:
+ * - Automatically adds CSS transitions (0.3s ease allow-discrete) to observed elements
+ * - Preserves existing transitions and only adds transitions for new properties
+ * - Listens for 'transitionstart' events on observed properties
+ * - Batches multiple transition events into a single callback using requestAnimationFrame
+ * - Restores original inline styles when elements are unobserved
+ * - Supports discrete transitions for properties like 'display', 'visibility', etc.
+ *
+ * @example
+ * ```typescript
+ * // Create observer for opacity and transform transitions
+ * const observer = new CSSTransitionObserver(
+ *   ['opacity', 'transform'],
+ *   (elements) => {
+ *     console.log('Transitions started on:', elements);
+ *     // Handle transition start logic here
+ *   }
+ * );
+ *
+ * // Start observing
+ * observer.init();
+ *
+ * // Observe specific elements - transitions will be added automatically
+ * const elements = document.querySelectorAll('.animated-item');
+ * observer.observe(elements);
+ *
+ * // Later, stop observing and restore original styles
+ * observer.unobserve(elements);
+ * observer.dispose();
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Observe discrete properties like display
+ * const displayObserver = new CSSTransitionObserver(
+ *   ['display', 'visibility'],
+ *   (elements) => {
+ *     // Called when display/visibility transitions start
+ *     elements.forEach(el => el.classList.add('transitioning'));
+ *   }
+ * );
+ *
+ * displayObserver.init();
+ * displayObserver.observe([modalElement]);
+ *
+ * // Triggering a display change will now fire the callback
+ * modalElement.style.display = 'none'; // Transition callback will be called
+ * ```
+ */ class CSSTransitionObserver {
+    init() {
+        this.isDisposed = false;
+    }
+    dispose() {
+        this.isDisposed = true;
+        // Restore all transitions when disposing
+        for (const [element] of this.observedElements){
+            this.unobserveElement(element);
+        }
+    }
+    observe(elements) {
+        if (this.isDisposed) return;
+        for (const element of elements){
+            this.observeElement(element);
+        }
+    }
+    unobserve(elements) {
+        if (this.isDisposed) return;
+        for (const element of elements){
+            this.unobserveElement(element);
+        }
+    }
+    revertTransitions(elements) {
+        for (const element of elements){
+            const elementData = this.observedElements.get(element);
+            if (elementData) {
+                element.style.transition = elementData.originalTransition;
+            }
+        }
+    }
+    reapplyTransitions(elements) {
+        for (const element of elements){
+            if (this.observedElements.has(element)) {
+                const elementData = this.observedElements.get(element);
+                if (elementData) {
+                    element.style.transition = elementData.newTransition;
+                }
+            }
+        }
+    }
+    pause() {
+        if (this.isDisposed) return;
+        this.isPaused = true;
+    }
+    resume() {
+        if (this.isDisposed) return;
+        this.isPaused = false;
+    }
+    observeElement(element) {
+        // Don't observe the same element twice
+        if (this.observedElements.has(element)) {
+            return;
+        }
+        // Set up transition modifications
+        const elementData = this.addTransitionsToElement(element);
+        // Set up transition listener
+        const callback = this.createTransitionCallback(element);
+        element.addEventListener("transitionstart", callback);
+        this.observedElements.set(element, _extends({
+            callback
+        }, elementData));
+    }
+    unobserveElement(element) {
+        const elementData = this.observedElements.get(element);
+        if (elementData) {
+            const { callback, originalTransition } = elementData;
+            // Remove transition listener
+            element.removeEventListener("transitionstart", callback);
+            // Restore original transitions
+            element.style.transition = originalTransition;
+        }
+        this.observedElements.delete(element);
+    }
+    createTransitionCallback(element) {
+        return (event)=>{
+            if (this.isPaused || this.isDisposed) return;
+            if (event.target === element && this.observedProperties.has(event.propertyName)) {
+                this._callback([
+                    element
+                ]);
+            }
+        };
+    }
+    addTransitionsToElement(element) {
+        // Store the original inline style values for restoration
+        const originalTransition = element.style.transition;
+        // Read computed styles to check for existing transition properties
+        const { transitionProperty, transition } = getComputedStyle(element);
+        // Get existing properties that already have transitions
+        const existingProperties = transitionProperty.split(",").map((prop)=>prop.trim()).filter((prop)=>prop && prop !== "none");
+        // Find properties that need transitions added
+        const newTransitions = [];
+        for (const property of this.observedProperties){
+            if (!existingProperties.includes(property)) {
+                newTransitions.push(property + " " + this.TRANSITION_DURATION + " allow-discrete");
+            }
+        }
+        // Combine existing and new transitions
+        if (newTransitions.length > 0) {
+            const allTransitions = [
+                transition,
+                ...newTransitions
+            ].filter((transition)=>transition && transition !== "none");
+            element.style.transition = allTransitions.join(", ");
+        }
+        return {
+            originalTransition,
+            newTransition: element.style.transition
+        };
+    }
+    constructor(observedProperties, callback){
+        this.callback = callback;
+        this.TRANSITION_DURATION = "1ms";
+        this.isDisposed = true;
+        this.isPaused = false;
+        this.observedElements = new Map();
+        this._callback = (elements)=>{
+            if (!this.isDisposed && !this.isPaused) {
+                this.callback(elements);
+            }
+        };
+        this.observedProperties = new Set(observedProperties);
+    }
+}
+
+export { CSSTransitionObserver };

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

@@ -0,0 +1,138 @@
+import { __webpack_require__ } from "../../../../../../../js/runtime.js";
+import { HEADER_IGNORE_ELEMENT_DATA_ATTRIBUTE, HEADER_INCLUDE_ELEMENT_DATA_ATTRIBUTE } from "../../../constants.js";
+import { CSSTransitionObserver } from "./CSSTransitionObserver.js";
+import "../../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* eslint-disable no-continue */ 
+
+/**
+ * This observer listens for style changes on specific elements and calls a callback when a change is detected.
+ * This is useful if we want to unshift an element when its style changes.
+ */ class ElementStyleChangeObserver {
+    static setConfig(config) {
+        this.config = config;
+    }
+    static get useCssTransitionObserver() {
+        var _this_config;
+        return ((_this_config = this.config) == null ? void 0 : _this_config.useCssTransitionObserver) && CSS.supports("transition-behavior", "allow-discrete");
+    }
+    init() {
+        this.isDisposed = false;
+        this.mutationObserver = new MutationObserver(this.mutationCallback);
+        if (ElementStyleChangeObserver.useCssTransitionObserver) {
+            this.cssTransitionObserver = new CSSTransitionObserver(this.observedProperties, this.cssTransitionCallback);
+            this.cssTransitionObserver.init();
+        }
+    }
+    dispose() {
+        var _this_mutationObserver, _this_cssTransitionObserver;
+        (_this_mutationObserver = this.mutationObserver) == null ? void 0 : _this_mutationObserver.disconnect();
+        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.dispose();
+        this.observedElements.clear();
+        this.isDisposed = true;
+    }
+    observe(elements) {
+        var _this_cssTransitionObserver;
+        if (this.isDisposed) return;
+        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.observe(elements);
+        for (const element of elements){
+            if (this.observedElements.has(element)) continue;
+            this.observeElement(element);
+            this.observedElements.add(element);
+        }
+    }
+    unobserve(elements) {
+        var _this_mutationObserver, _this_cssTransitionObserver;
+        if (this.isDisposed) return;
+        (_this_mutationObserver = this.mutationObserver) == null ? void 0 : _this_mutationObserver.disconnect();
+        for (const element of elements){
+            this.observedElements.delete(element);
+        }
+        // Re-observe the remaining elements
+        for (const element of this.observedElements){
+            this.observeElement(element);
+        }
+        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.unobserve(elements);
+    }
+    pause() {
+        var _this_cssTransitionObserver;
+        if (this.isDisposed) return;
+        if (this.isPaused) return;
+        this.isPaused = true;
+        if (this.mutationObserver) {
+            const records = this.mutationObserver.takeRecords();
+            this.mutationCallback(records, this.mutationObserver);
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.pause();
+    }
+    resume() {
+        var _this_cssTransitionObserver;
+        if (this.isDisposed) return;
+        if (!this.isPaused) return;
+        this.isPaused = false;
+        if (!this.mutationObserver) {
+            this.mutationObserver = new MutationObserver(this.mutationCallback);
+            for (const element of this.observedElements){
+                this.observeElement(element);
+            }
+        }
+        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.resume();
+    }
+    observeElement(element) {
+        var _this_mutationObserver;
+        (_this_mutationObserver = this.mutationObserver) == null ? void 0 : _this_mutationObserver.observe(element, {
+            attributes: true,
+            attributeFilter: [
+                "style",
+                "class",
+                HEADER_IGNORE_ELEMENT_DATA_ATTRIBUTE,
+                HEADER_INCLUDE_ELEMENT_DATA_ATTRIBUTE
+            ]
+        });
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(observedProperties, callback){
+        this.observedProperties = observedProperties;
+        this.callback = callback;
+        this.isDisposed = true;
+        this.isPaused = false;
+        this.observedElements = new Set();
+        this.mutationObserver = null;
+        this.cssTransitionObserver = null;
+        this.mutationCallback = (mutations)=>{
+            if (this.isDisposed) return;
+            const elements = new Set();
+            // Remove duplicates and filter out elements that have the ignore attribute
+            for (const mutation of mutations){
+                if (mutation.target instanceof HTMLElement && this.observedElements.has(mutation.target)) {
+                    elements.add(mutation.target);
+                }
+            }
+            if (elements.size > 0) {
+                if (this.cssTransitionObserver) {
+                    var _this_cssTransitionObserver;
+                    this.pause();
+                    (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.revertTransitions(elements);
+                    this.resume();
+                    requestAnimationFrame(()=>{
+                        var _this_cssTransitionObserver;
+                        this.pause();
+                        (_this_cssTransitionObserver = this.cssTransitionObserver) == null ? void 0 : _this_cssTransitionObserver.reapplyTransitions(elements);
+                        this.resume();
+                    });
+                }
+                this.callback(elements);
+            }
+        };
+        this.cssTransitionCallback = (elements)=>{
+            if (this.isDisposed) return;
+            this.callback(elements);
+        };
+    }
+}
+ElementStyleChangeObserver.config = null;
+
+export { ElementStyleChangeObserver };

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

@@ -0,0 +1,110 @@
+import { RuleWrapper } from "./RuleWrapper.js";
+import { StyleSelectorObserver } from "./StyleSelectorObserver/StyleSelectorObserver.js";
+
+
+
+/**
+ * This class is used to generate a style element that is used to offset any element that has the shifted data attribute.
+ * The generated style element adds the given offset to all style rules that match the given property.
+ *
+ * @example
+ *
+ * We have the following style rule somewhere in the document:
+ *
+ * @media (max-width: 1000px) {
+ *   .test-selector {
+ *     color: red;
+ *   }
+ * }
+ *
+ * We can now create an ExternalStyleManager instance with the following options:
+ *
+ * const manager = new ExternalStyleManager({
+ *   property: "top",
+ *   styleElement,
+ *   dataAttribute: "shifted",
+ *   offsetCssValue: "var(--shift-offset)",
+ * });
+ *
+ * The manager will now generate the following style element:
+ *
+ * @media (max-width: 1000px) {
+ *   .test-selector[shifted] {
+ *     top: calc(var(--shift-offset) + 10px);
+ *   }
+ * }
+ *
+ * The manager uses the StyleSelectorObserver to update the style element every time new style rules are added.
+ *
+ */ class ExternalStyleManager {
+    init() {
+        this.styleSelectorObserver.observe(this.onSelectorChange, [
+            "" + this.options.property + ":*"
+        ]);
+        this.onSelectorChange(this.styleSelectorObserver.current);
+    }
+    dispose() {
+        this.styleSelectorObserver.unobserve(this.onSelectorChange);
+    }
+    writeStyles(selectorValue) {
+        let rulesLength = 0;
+        for (const { selector, value, priority, wrapper } of selectorValue.rules){
+            const offsetSelector = ":is(" + selector + ")[" + this.options.dataAttribute + "]";
+            const priorityText = priority === "" ? "" : "!important";
+            const valueText = value === "0" ? "0px" : value;
+            let cssText = "";
+            if (valueText === "auto") {
+                cssText = this.getAutoRuleCssText(offsetSelector, priorityText);
+            } else if (this.isVar(valueText)) {
+                cssText = this.getVarRuleCssText(offsetSelector, valueText, priorityText);
+            } else {
+                cssText = this.getRuleCssText(offsetSelector, valueText, priorityText);
+            }
+            const computedCssText = wrapper ? RuleWrapper.wrap(wrapper, cssText) : cssText;
+            this.options.styleElement.addRule(computedCssText);
+            rulesLength++;
+        }
+        if (rulesLength > 0) this.options.styleElement.writeRules();
+    }
+    getAutoRuleCssText(selector, priority) {
+        return selector + " { " + this.options.property + ": auto " + priority + "; }";
+    }
+    getRuleCssText(selector, value, priority) {
+        return selector + " { " + this.options.property + ": calc(" + value + " + " + this.options.offsetCssValue + ") " + priority + "; }";
+    }
+    isVar(value) {
+        return value.trim().match(/^var\(--.*\)$/);
+    }
+    getVarRuleCssText(selector, value, priority) {
+        // Transform var(--<anything>, 0) to var(--<anything>, 0px) for better CSS compatibility
+        const normalizedValue = value.replace(/^(var\([^,)]+,\s*)0(\s*\))$/, "$10px$2");
+        const varName = normalizedValue.replace(/^var\(([^,)]+).*\)$/, "$1");
+        const pxValue = "calc(" + normalizedValue + " * 1px)";
+        // If the var is 0, it cannot be used in calc()
+        // We need to wrap it using calc(var(--var-name) * 1px) to convert it to a px value
+        // But we should only do this if the var is actually 0, otherwise calc(var(--var-name) * 1px) will break the rule
+        const rules = [
+            // Base rule
+            this.getRuleCssText(selector, normalizedValue, priority),
+            // Fallback rule if var is set on the container of the target element with a 0 value
+            "@container style(" + varName + ": 0) { " + this.getRuleCssText(selector, pxValue, priority) + "}",
+            // Base rule if var is set on the target element itself
+            this.getRuleCssText(selector + ':is([style*="' + varName + '"])', normalizedValue, priority),
+            // Fallback rule if var is set on the target element itself with a 0 value
+            this.getRuleCssText(selector + ':is([style*="' + varName + ':0"])', pxValue, priority)
+        ];
+        return rules.join("");
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(options){
+        this.options = options;
+        this.styleSelectorObserver = StyleSelectorObserver.getInstance();
+        this.onSelectorChange = (selectors)=>{
+            const selectorValue = selectors.get("" + this.options.property + ":*");
+            if (!selectorValue) return;
+            this.writeStyles(selectorValue);
+        };
+    }
+}
+
+export { ExternalStyleManager };