@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/animations/AnimationManager.js

@@ -0,0 +1,31 @@
+import { AnimationManagerFooter } from "./AnimationManagerFooter.js";
+import { AnimationManagerHeader } from "./AnimationManagerHeader.js";
+import { AnimationManagerModal } from "./AnimationManagerModal.js";
+import { AnimationManagerSidebar } from "./AnimationManagerSidebar.js";
+import { LocationEnum } from "../../../../../../src/graphql-types.js";
+
+
+
+
+
+
+class AnimationManager {
+    getAnimator(host, location, animation) {
+        const manager = this.ANIMATION_MANAGERS[location];
+        if (!manager) {
+            throw new Error("Unknown location: " + location);
+        }
+        return manager.get(host, animation);
+    }
+    constructor(){
+        this.ANIMATION_MANAGERS = {
+            [LocationEnum.Footer]: new AnimationManagerFooter(),
+            [LocationEnum.Header]: new AnimationManagerHeader(),
+            [LocationEnum.Popup]: new AnimationManagerModal(),
+            [LocationEnum.Sidebar]: new AnimationManagerSidebar(),
+            [LocationEnum.Embed]: null
+        };
+    }
+}
+
+export { AnimationManager };

package/routes/app/offers/scripts/rendering/animations/AnimationManagerFooter.js

@@ -0,0 +1,81 @@
+import { FOOTER_HEIGHT_CSS_VARIABLE } from "../../constants.js";
+import { Animator } from "./Animator.js";
+import { BaseAnimationManager } from "./BaseAnimationManager.js";
+
+
+
+
+class AnimationManagerFooter extends BaseAnimationManager {
+    slideUp(host) {
+        const { offsetHeight } = host;
+        const originalBottom = host.style.getPropertyValue("bottom");
+        host.style.setProperty("bottom", "calc(-" + offsetHeight + "px + var(" + FOOTER_HEIGHT_CSS_VARIABLE + ", 0px))");
+        const cleanup = ()=>host.style.setProperty("bottom", originalBottom);
+        return new Animator(document.documentElement, {
+            type: "simple",
+            keyframes: [
+                {
+                    [FOOTER_HEIGHT_CSS_VARIABLE]: "0px"
+                },
+                {
+                    [FOOTER_HEIGHT_CSS_VARIABLE]: "" + offsetHeight + "px"
+                }
+            ],
+            options: this.options,
+            cleanup
+        });
+    }
+    pushDown(host) {
+        const keyframes = [
+            {
+                transform: "translateY(-100%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    fadeIn(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    slideRight(host) {
+        const keyframes = [
+            {
+                transform: "translateX(-100%)"
+            },
+            {
+                transform: "translateX(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    constructor(...args){
+        super(...args), this.options = {
+            duration: 300,
+            easing: "ease-out"
+        };
+    }
+}
+
+export { AnimationManagerFooter };

package/routes/app/offers/scripts/rendering/animations/AnimationManagerHeader.js

@@ -0,0 +1,81 @@
+import { HEADER_HEIGHT_CSS_VARIABLE } from "../../constants.js";
+import { Animator } from "./Animator.js";
+import { BaseAnimationManager } from "./BaseAnimationManager.js";
+
+/* eslint-disable no-continue */ /* eslint-disable rulesdir/css-units */ 
+
+
+class AnimationManagerHeader extends BaseAnimationManager {
+    slideUp(host) {
+        const keyframes = [
+            {
+                transform: "translateY(100%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    fadeIn(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    slideRight(host) {
+        const keyframes = [
+            {
+                transform: "translateX(-100%)"
+            },
+            {
+                transform: "translateX(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    pushDown(host) {
+        const { offsetHeight } = host;
+        const originalTop = host.style.getPropertyValue("top");
+        host.style.setProperty("top", "calc(-" + offsetHeight + "px + var(" + HEADER_HEIGHT_CSS_VARIABLE + ", 0px))");
+        const cleanup = ()=>host.style.setProperty("top", originalTop);
+        return new Animator(document.documentElement, {
+            type: "simple",
+            keyframes: [
+                {
+                    [HEADER_HEIGHT_CSS_VARIABLE]: "0px"
+                },
+                {
+                    [HEADER_HEIGHT_CSS_VARIABLE]: "" + offsetHeight + "px"
+                }
+            ],
+            options: this.options,
+            cleanup
+        });
+    }
+    constructor(...args){
+        super(...args), this.options = {
+            duration: 300,
+            easing: "ease-out"
+        };
+    }
+}
+
+export { AnimationManagerHeader };

package/routes/app/offers/scripts/rendering/animations/AnimationManagerModal.js

@@ -0,0 +1,117 @@
+import { Animator } from "./Animator.js";
+import { BaseAnimationManager } from "./BaseAnimationManager.js";
+
+
+
+class AnimationManagerModal extends BaseAnimationManager {
+    slideUp(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        const innerKeyframes = [
+            {
+                transform: "translateY(50%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options,
+            additionalElements: [
+                {
+                    element: host.firstElementChild,
+                    keyframes: innerKeyframes
+                }
+            ]
+        });
+    }
+    pushDown(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        const innerKeyframes = [
+            {
+                transform: "translateY(-50%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options,
+            additionalElements: [
+                {
+                    element: host.firstElementChild,
+                    keyframes: innerKeyframes
+                }
+            ]
+        });
+    }
+    fadeIn(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    slideRight(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        const innerKeyframes = [
+            {
+                transform: "translateX(-50%)"
+            },
+            {
+                transform: "translateX(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options,
+            additionalElements: [
+                {
+                    element: host.firstElementChild,
+                    keyframes: innerKeyframes
+                }
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.options = {
+            duration: 300,
+            easing: "ease-out"
+        };
+    }
+}
+
+export { AnimationManagerModal };

package/routes/app/offers/scripts/rendering/animations/AnimationManagerSidebar.js

@@ -0,0 +1,75 @@
+import { Animator } from "./Animator.js";
+import { BaseAnimationManager } from "./BaseAnimationManager.js";
+
+
+
+class AnimationManagerSidebar extends BaseAnimationManager {
+    slideUp(host) {
+        const keyframes = [
+            {
+                transform: "translateY(100%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    pushDown(host) {
+        const keyframes = [
+            {
+                transform: "translateY(-100%)"
+            },
+            {
+                transform: "translateY(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    fadeIn(host) {
+        const keyframes = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    slideRight(host) {
+        const keyframes = [
+            {
+                transform: "translateX(-100%)"
+            },
+            {
+                transform: "translateX(0)"
+            }
+        ];
+        return new Animator(host, {
+            type: "simple",
+            keyframes,
+            options: this.options
+        });
+    }
+    constructor(...args){
+        super(...args), this.options = {
+            duration: 300,
+            easing: "ease-out"
+        };
+    }
+}
+
+export { AnimationManagerSidebar };

package/routes/app/offers/scripts/rendering/animations/AnimationResult.js

@@ -0,0 +1,43 @@
+import { __webpack_require__ } from "../../../../../../js/runtime.js";
+import { _debugLog } from "../../../../../../src/smart_website/utils.js";
+import "../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var AnimationResult_setTimeout = __webpack_require__(68034).pS;
+
+class AnimationResult {
+    get animations() {
+        return this.options.animations;
+    }
+    then(onfulfilled, onrejected) {
+        return this.promise.then(onfulfilled, onrejected);
+    }
+    catch(onrejected) {
+        return this.promise.catch(onrejected);
+    }
+    finally(onfinally) {
+        return this.promise.finally(onfinally);
+    }
+    constructor(options){
+        this.options = options;
+        this[Symbol.toStringTag] = "AnimationResult";
+        const promises = [];
+        const animationsPromise = Promise.all(options.animations.map((animation)=>animation.finished));
+        promises.push(animationsPromise);
+        if (options.timeout) {
+            const timeoutPromise = new Promise((resolve)=>AnimationResult_setTimeout(()=>resolve(null), options.timeout));
+            promises.push(timeoutPromise);
+        }
+        this.promise = Promise.race(promises).then((animations)=>{
+            if (animations === null) {
+                _debugLog("Animation timed out", {
+                    timeout: String(options.timeout)
+                });
+                return [];
+            }
+            return animations;
+        });
+        this.promise.finally(()=>options.cleanup == null ? void 0 : options.cleanup.call(options));
+    }
+}
+
+export { AnimationResult };

package/routes/app/offers/scripts/rendering/animations/Animator.js

@@ -0,0 +1,78 @@
+import { AnimationResult } from "./AnimationResult.js";
+
+
+const DELAY_FACTOR = 1.5;
+const MAX_DELAY = 1000;
+class Animator {
+    animate() {
+        switch(this.config.type){
+            case "simple":
+                return new AnimationResult(this.createSimpleAnimation(this.config, false));
+            case "complex":
+                return new AnimationResult(this.createComplexAnimation(this.config, false));
+        }
+    }
+    reverse() {
+        switch(this.config.type){
+            case "simple":
+                return new AnimationResult(this.createSimpleAnimation(this.config, true));
+            case "complex":
+                return new AnimationResult(this.createComplexAnimation(this.config, true));
+        }
+    }
+    createSimpleAnimation(config, reverse) {
+        const hostKeyframes = reverse ? [
+            ...config.keyframes
+        ].reverse() : config.keyframes;
+        const arr = [
+            {
+                element: this.host,
+                keyframes: hostKeyframes
+            }
+        ];
+        if (config.additionalElements) {
+            for (const { element, keyframes } of config.additionalElements){
+                const elementKeyframes = keyframes ? reverse ? [
+                    ...keyframes
+                ].reverse() : keyframes : hostKeyframes;
+                arr.push({
+                    element,
+                    keyframes: elementKeyframes
+                });
+            }
+        }
+        const animations = arr.map((param)=>{
+            let { element, keyframes } = param;
+            return element.animate(keyframes, config.options);
+        });
+        return {
+            animations,
+            timeout: this.getTimeout(config.options),
+            cleanup: config.cleanup
+        };
+    }
+    createComplexAnimation(param, reverse) {
+        let { options, perform } = param;
+        const { animations, cleanup } = perform(this.host, {
+            options,
+            reverse
+        });
+        return {
+            animations,
+            cleanup,
+            timeout: this.getTimeout(options)
+        };
+    }
+    getTimeout(options) {
+        var _options_duration;
+        const duration = Number((_options_duration = options.duration) != null ? _options_duration : 0);
+        return Math.min(duration * DELAY_FACTOR, duration + MAX_DELAY);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(host, config){
+        this.host = host;
+        this.config = config;
+    }
+}
+
+export { Animator };

package/routes/app/offers/scripts/rendering/animations/BaseAnimationManager.js

@@ -0,0 +1,25 @@
+import { ContentAnimationTypeEnum } from "../../../../../../src/graphql-types.js";
+
+
+class BaseAnimationManager {
+    get(host, animation) {
+        // Return fade in animation if prefer-reduced-motion is enabled
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return this.fadeIn(host);
+        }
+        switch(animation.type){
+            case ContentAnimationTypeEnum.SlideUp:
+                return this.slideUp(host);
+            case ContentAnimationTypeEnum.SlideRight:
+                return this.slideRight(host);
+            case ContentAnimationTypeEnum.PushDown:
+                return this.pushDown(host);
+            case ContentAnimationTypeEnum.FadeIn:
+                return this.fadeIn(host);
+            default:
+                throw new Error("Unknown animation: " + animation.type);
+        }
+    }
+}
+
+export { BaseAnimationManager };

package/routes/app/offers/scripts/rendering/lib/BaseComponent.js

@@ -0,0 +1,106 @@
+import { isMobileResolution } from "../../utils.js";
+
+
+class HTMLOutput {
+    get style() {
+        if (this._style) return this._style;
+        this._style = "<style>";
+        this.components.forEach((component)=>this._style += component.style);
+        this._style += "</style>";
+        return this._style;
+    }
+    toString() {
+        return "" + this.style + this.html;
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(/**
+     * The raw HTML string to render.
+     */ html, /**
+     * All the components that are part of the rendered output.
+     * This is used to extract the styles of all the components and apply them to the shadow root.
+     */ components){
+        this.html = html;
+        this.components = components;
+        this._style = null;
+    }
+}
+class BaseComponent {
+    get root() {
+        if (this._root) {
+            return this._root;
+        }
+        this._root = document.createElement("div");
+        return this._root;
+    }
+    get shadowRoot() {
+        if (this._shadowRoot) {
+            return this._shadowRoot;
+        }
+        this._shadowRoot = this.root.attachShadow({
+            mode: "open"
+        });
+        return this._shadowRoot;
+    }
+    setState(state) {
+        this.state = state;
+        this.render();
+    }
+    html(raw) {
+        for(var _len = arguments.length, tokens = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+            tokens[_key - 1] = arguments[_key];
+        }
+        const components = new Set();
+        const html = raw.reduce((acc, str, i)=>{
+            let accNext = "";
+            for (const token of [
+                tokens[i]
+            ].flat()){
+                let next = token;
+                if (token instanceof BaseComponent || token instanceof HTMLOutput) {
+                    const htmlOutput = token instanceof BaseComponent ? token.content : token;
+                    htmlOutput.components.forEach((component)=>components.add(component));
+                    next = htmlOutput.html;
+                }
+                accNext = "" + accNext + (next != null ? next : "");
+            }
+            return "" + acc + str + (accNext != null ? accNext : "");
+        }, "");
+        components.add(this);
+        return new HTMLOutput(html, components);
+    }
+    render() {
+        this.shadowRoot.innerHTML = this.content.toString();
+        return this.root;
+    }
+    classes() {
+        for(var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++){
+            classNames[_key] = arguments[_key];
+        }
+        return classNames.filter(Boolean).join(" ");
+    }
+    get isMobile() {
+        return this.device === "mobile";
+    }
+    createClassesProxy() {
+        return new Proxy({}, {
+            get: (target, key)=>{
+                var _target_key;
+                return (_target_key = target[key]) != null ? _target_key : target[key] = key + "-" + this.displayName + "-" + Math.random().toString(36).slice(2);
+            }
+        });
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props, state){
+        this.props = props;
+        this.state = state;
+        this.device = isMobileResolution() ? "mobile" : "desktop";
+        this._root = null;
+        this._shadowRoot = null;
+        /**
+   * A proxy object that generates unique class names for the component.
+   */ this.cx = this.createClassesProxy();
+    }
+}
+
+var BaseComponent_HTMLOutput = /* unused export */ undefined;
+export { BaseComponent, BaseComponent_HTMLOutput as HTMLOutput };