@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/src/personalizations/personalization-manager.js

@@ -0,0 +1,110 @@
+import { NodeFreezingStrategy } from "./strategies/node-freezing-strategy.js";
+
+/* eslint-disable no-dupe-class-members */ 
+class PersonalizationManager {
+    get(selector) {
+        var _strategy_get;
+        const strategy = Array.from(this.elementToStrategiesMap.values()).find((s)=>s.selector === selector);
+        if (!strategy) return null;
+        return (_strategy_get = strategy.get()) != null ? _strategy_get : null;
+    }
+    getSelector(element) {
+        var _ref;
+        var _this_elementToStrategiesMap_get;
+        return (_ref = (_this_elementToStrategiesMap_get = this.elementToStrategiesMap.get(element)) == null ? void 0 : _this_elementToStrategiesMap_get.selector) != null ? _ref : null;
+    }
+    /*
+   * Selector can be passed if you want to retrieve the element with the selector later (using get method)
+   * You can also check what was the selector used to personalize an element (using getSelector method)
+   */ add(element, selector) {
+        if (element) {
+            const cached = this.elementToStrategiesMap.get(element);
+            // In SPA apps, we may keep a stale Element, To ensure we are personalizing a valid element, we check if element is still connected to DOM.
+            if (cached == null ? void 0 : cached.get().isConnected) return element;
+        }
+        if (!element) return null;
+        const strategy = this.retrieveStrategy(element, selector);
+        for (const observer of this.observers){
+            strategy.addObserver(observer);
+        }
+        this.elementToStrategiesMap.set(element, strategy);
+        return strategy.get();
+    }
+    applyLoading(element, type) {
+        if (!element) return;
+        const strategy = this.elementToStrategiesMap.get(element);
+        if (strategy) {
+            strategy.applyLoading(type);
+            return strategy.uuid;
+        }
+    }
+    removeLoadingByUuid(uuid) {
+        const strategy = Array.from(this.elementToStrategiesMap.values()).find((s)=>s.uuid === uuid);
+        if (strategy) {
+            strategy.removeLoading();
+        }
+    }
+    personalize(element, personalization) {
+        if (!element) return;
+        const strategy = this.elementToStrategiesMap.get(element);
+        if (strategy) {
+            strategy.personalize(personalization);
+        }
+    }
+    // Soft revert, only revert the personalization but keep the selector in the manager
+    revert(element) {
+        const strategy = this.elementToStrategiesMap.get(element);
+        if (strategy) {
+            strategy.revert();
+        }
+    }
+    // Apply soft revert to all selectors
+    reset() {
+        this.elementToStrategiesMap.forEach((strategy)=>strategy.revert());
+    }
+    // Hard revert, revert the personalization and remove the selector from the manager
+    remove(element) {
+        if (!element) return;
+        const strategy = this.elementToStrategiesMap.get(element);
+        if (strategy) {
+            strategy.revert();
+            for (const observer of this.observers){
+                strategy.removeObserver(observer);
+            }
+        }
+        this.elementToStrategiesMap.delete(element);
+    }
+    // Apply hard revert to all selectors
+    removeAll() {
+        this.elementToStrategiesMap.forEach((strategy)=>{
+            strategy.revert();
+            for (const observer of this.observers){
+                strategy.removeObserver(observer);
+            }
+        });
+        this.elementToStrategiesMap.clear();
+    }
+    addObserver(observer) {
+        this.observers.push(observer);
+        this.elementToStrategiesMap.forEach((strategy)=>{
+            strategy.addObserver(observer);
+        });
+    }
+    removeObserver(observer) {
+        this.observers.splice(this.observers.indexOf(observer), 1);
+        this.elementToStrategiesMap.forEach((strategy)=>{
+            strategy.removeObserver(observer);
+        });
+    }
+    retrieveStrategy(element, selector) {
+        // Only one strategy for now, we might need to add more in the future based on the element type
+        return new NodeFreezingStrategy(element, selector, this.enhancedProxyFreezing);
+    }
+    constructor(enhancedProxyFreezing = false){
+        this.observers = [];
+        this.elementToStrategiesMap = new Map();
+        this.enhancedProxyFreezing = enhancedProxyFreezing;
+    }
+}
+
+export { PersonalizationManager };

package/src/personalizations/strategies/node-freezing-strategy.js

@@ -0,0 +1,174 @@
+import { _debugLog } from "../../smart_website/utils.js";
+import { applyPersonalization, applyLoading } from "../utils.js";
+import { esm_browser_v4, _extends } from "../../../js/4101.js";
+
+
+
+
+
+const __isProxy = Symbol("__isProxy");
+class NodeFreezingStrategy {
+    get() {
+        return this.original;
+    }
+    applyLoading(type) {
+        this.revert();
+        applyLoading(this.original, type);
+        this.unfreeze = this.freezeDomNode(this.original, {
+            content: true,
+            style: true
+        });
+        this.state = "loading";
+    }
+    removeLoading() {
+        if (this.state !== "loading") return;
+        if (!this.config) return;
+        this.personalize(this.config);
+    }
+    personalize(config) {
+        this.revert();
+        this.config = config;
+        applyPersonalization(this.original, config);
+        this.unfreeze = this.freezeDomNode(this.original, this.getFreezeOptions(config));
+        this.state = "personalized";
+    }
+    revert() {
+        if (this.state === "original") {
+            this.snapshot();
+            return;
+        }
+        const changes = this.unfreeze == null ? void 0 : this.unfreeze.call(this);
+        this.original.innerHTML = this.innerHTML;
+        if (typeof this.cssText === "string" && this.original instanceof HTMLElement) {
+            this.original.style.cssText = this.cssText;
+        }
+        if (changes) {
+            this.applyFreezeChanges(changes);
+        }
+        this.snapshot();
+        this.unfreeze = undefined;
+        this.state = "original";
+    }
+    addObserver(observer) {
+        observer.observe(this.original);
+    }
+    removeObserver(observer) {
+        observer.unobserve(this.original);
+    }
+    snapshot() {
+        this.innerHTML = this.original.innerHTML;
+        if (this.original instanceof HTMLElement) {
+            this.cssText = this.original.style.cssText;
+        }
+    }
+    freezeDomNode(node, param) {
+        let { content, style } = param;
+        const unfreezeFunctions = [];
+        if (content) {
+            unfreezeFunctions.push(this.freezeDomProperty(node, "textContent", Node.prototype), this.freezeDomProperty(node, "appendChild", Node.prototype), this.freezeDomProperty(node, "removeChild", Node.prototype), this.freezeDomProperty(node, "replaceChild", Node.prototype));
+        }
+        if (node instanceof Element && content) {
+            unfreezeFunctions.push(this.freezeDomProperty(node, "innerHTML", Element.prototype), this.freezeDomProperty(node, "outerHTML", Element.prototype), this.freezeDomProperty(node, "append", Element.prototype), this.freezeDomProperty(node, "replaceChildren", Element.prototype));
+        }
+        if (node instanceof HTMLElement && content) {
+            unfreezeFunctions.push(this.freezeDomProperty(node, "innerText", HTMLElement.prototype));
+        }
+        if (node instanceof HTMLElement && style) {
+            if (this.enhancedProxyFreezing) {
+                unfreezeFunctions.push(this.freezeDomProperty(node.style, "setProperty", CSSStyleDeclaration.prototype), this.freezeDomProperty(node.style, "removeProperty", CSSStyleDeclaration.prototype));
+            }
+            unfreezeFunctions.push(this.freezeDomProperty(node, "style", HTMLElement.prototype));
+        }
+        node.childNodes.forEach((childNode)=>unfreezeFunctions.push(this.freezeDomNode(childNode, {
+                content,
+                style
+            })));
+        return ()=>unfreezeFunctions.map((unfreeze)=>unfreeze()).flat();
+    }
+    freezeDomProperty(obj, prop, proto) {
+        const original = obj[prop];
+        const changes = {
+            object: obj,
+            property: prop,
+            set: null,
+            calls: [],
+            innerSet: new Map()
+        };
+        Object.defineProperty(obj, prop, {
+            get: ()=>{
+                if (!original || typeof original !== "object" && typeof original !== "function") {
+                    return original;
+                }
+                return new Proxy(original, _extends({}, this.enhancedProxyFreezing && {
+                    get: (target, p)=>{
+                        if (p === __isProxy) return true;
+                        const value = target[p];
+                        if (typeof value === "function" && !Reflect.get(value, __isProxy)) {
+                            return value.bind(target);
+                        }
+                        return value;
+                    }
+                }, {
+                    apply: (_, __, args)=>{
+                        _debugLog("Attempted to call " + prop + ", but it's not callable.");
+                        changes.calls.push(args);
+                    },
+                    set: (_, p, v)=>{
+                        _debugLog("Attempted to modify " + p + " of " + prop + ", but it's read-only.");
+                        changes.innerSet.set(p, v);
+                        return true;
+                    }
+                }));
+            },
+            set: (value)=>{
+                _debugLog("Attempted to modify " + prop + ", but it's read-only.");
+                changes.set = value;
+                changes.innerSet.clear();
+            },
+            configurable: true
+        });
+        return ()=>{
+            var _Object_getOwnPropertyDescriptor;
+            const descriptor = (_Object_getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(proto, prop)) != null ? _Object_getOwnPropertyDescriptor : {
+                value: original,
+                configurable: true,
+                writable: true
+            };
+            Object.defineProperty(obj, prop, descriptor);
+            return changes.set !== null || changes.calls.length > 0 || changes.innerSet.size > 0 ? [
+                changes
+            ] : [];
+        };
+    }
+    getFreezeOptions(config) {
+        return {
+            content: typeof config.textContent === "string",
+            style: typeof config.backgroundColor === "string" || typeof config.textColor === "string" || typeof config.borderColor === "string"
+        };
+    }
+    applyFreezeChanges(changes) {
+        for (const change of changes){
+            if (change.set !== null) {
+                change.object[change.property] = change.set;
+            }
+            for (const [p, v] of change.innerSet.entries()){
+                change.object[change.property][p] = v;
+            }
+            for (const call of change.calls){
+                change.object[change.property](...call);
+            }
+        }
+    }
+    constructor(original, selector, enhancedProxyFreezing){
+        this.original = original;
+        this.state = "original";
+        this.config = {};
+        this.type = "NodeFreezingStrategy";
+        this.uuid = esm_browser_v4();
+        this.selector = selector;
+        this.enhancedProxyFreezing = enhancedProxyFreezing != null ? enhancedProxyFreezing : false;
+        this.snapshot();
+    }
+}
+
+export { NodeFreezingStrategy };

package/src/personalizations/utils.js

@@ -0,0 +1,187 @@
+function applyPersonalization(element, config) {
+    if (!element) {
+        return;
+    }
+    if (typeof config.textContent === "string") {
+        replaceText(element, config.textContent);
+    }
+    applySyling(element, config);
+}
+function isBorderCustomizationAvailable(element) {
+    const style = getComputedStyle(element);
+    return element instanceof HTMLElement && (style.borderTopStyle !== "" || style.borderRightStyle !== "" || style.borderBottomStyle !== "" || style.borderLeftStyle !== "");
+}
+function getTextContent(tag) {
+    var _tag_textContent;
+    if (tag.nodeName === "INPUT") {
+        var _tag_value;
+        return ((_tag_value = tag.value) == null ? void 0 : _tag_value.trim()) || undefined;
+    }
+    return ((_tag_textContent = tag.textContent) == null ? void 0 : _tag_textContent.trim()) || undefined;
+}
+const LOADING_SVG_TEMPLATE_ID = "q-intermediate-loading-template";
+const LOADING_SVG_STRING_ICON = (color, fontSize)=>{
+    if (color === void 0) color = "white";
+    if (fontSize === void 0) fontSize = "14px";
+    return '\n<svg id="intermediate-loading-svg" width="' + fontSize + '" height="' + fontSize + '" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">\n    <defs>\n        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">\n            <stop stop-color="' + color + '" stop-opacity="0" offset="0%"/>\n            <stop stop-color="' + color + '" stop-opacity=".631" offset="63.146%"/>\n            <stop stop-color="' + color + '" offset="100%"/>\n        </linearGradient>\n    </defs>\n    <g fill="none" fill-rule="evenodd">\n        <g transform="translate(1 1)">\n            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">\n                <animateTransform\n                    attributeName="transform"\n                    type="rotate"\n                    from="0 18 18"\n                    to="360 18 18"\n                    dur="0.9s"\n                    repeatCount="indefinite" />\n            </path>\n            <circle fill="' + color + '" cx="36" cy="18" r="1">\n                <animateTransform\n                    attributeName="transform"\n                    type="rotate"\n                    from="0 18 18"\n                    to="360 18 18"\n                    dur="0.9s"\n                    repeatCount="indefinite" />\n            </circle>\n        </g>\n    </g>\n</svg>';
+};
+const LOADING_SVG_STRING_SPINNER = (color, radius)=>{
+    const strokeWidth = 2;
+    const circumference = Math.floor(radius * Math.PI * 2);
+    const maxLengthSize = Math.floor(circumference * 0.75);
+    const gapSizeBiggerThanCircumference = circumference * 3;
+    return '\n    <svg\n      width="' + radius * 2 + '"\n      height="' + radius * 2 + '"\n      viewBox="0 0 ' + radius * 2 + " " + radius * 2 + '"\n      xmlns="http://www.w3.org/2000/svg"\n    >\n      <circle\n        cx="' + radius + '"\n        cy="' + radius + '"\n        r="' + (radius - strokeWidth) + '"\n        fill="none"\n        stroke-width="' + strokeWidth + 'px"\n        stroke="rgba(0, 0, 0, 0.12)"\n      ></circle>\n      <circle\n        cx="' + radius + '"\n        cy="' + radius + '"\n        r="' + (radius - strokeWidth) + '"\n        fill="none"\n        stroke="' + color + '"\n        stroke-width="' + strokeWidth + 'px"\n      >\n        <animateTransform\n          attributeName="transform"\n          attributeType="XML"\n          type="rotate"\n          from="0 ' + radius + " " + radius + '"\n          to="360 ' + radius + " " + radius + '"\n          dur="2s"\n          repeatCount="indefinite"\n        />\n        <animate\n          attributeName="stroke-dasharray"\n          dur="1.5s"\n          values="0 ' + gapSizeBiggerThanCircumference + "; " + maxLengthSize + " " + gapSizeBiggerThanCircumference + "; " + maxLengthSize + " " + gapSizeBiggerThanCircumference + "; " + maxLengthSize + " " + gapSizeBiggerThanCircumference + '"\n          keyTimes="0; 0.475; 0.95; 1"\n          repeatCount="indefinite"\n        />\n        <animate\n          attributeName="stroke-dashoffset"\n          dur="1.5s"\n          values="0; -' + Math.floor(circumference * 0.25) + "; -" + circumference + "; -" + circumference + '"\n          keyTimes="0; 0.475; 0.95; 1"\n          repeatCount="indefinite"\n        />\n      </circle>\n    </svg>\n  ';
+};
+function applyLoading(element, type) {
+    switch(type){
+        case "hidden":
+            element instanceof HTMLElement && (element.style.visibility = "hidden");
+            break;
+        case "ellipsis":
+            element.textContent = "...";
+            break;
+        case "spinner":
+            applySpinnerLoading(element);
+            break;
+        case "icon":
+            applyIconLoading(element);
+            break;
+    }
+}
+function pxToNum(pixels) {
+    return Number(pixels.replace("px", ""));
+}
+function applySpinnerLoading(element) {
+    if (element instanceof HTMLElement) {
+        const { position } = getComputedStyle(element);
+        const { offsetHeight, offsetWidth } = element;
+        const { color, fontSize } = getComputedStyle(getElementWithMostText(element) || element);
+        const radius = Math.floor(pxToNum(fontSize) / 2);
+        const leftPos = offsetWidth / 2 - radius;
+        const topPos = offsetHeight / 2 - radius;
+        let hasTextNode = false;
+        element.childNodes.forEach((node)=>{
+            if (node instanceof HTMLElement) {
+                node.style.opacity = "0";
+            } else {
+                hasTextNode = true;
+            }
+        });
+        // Cosmetic only mutations, keeping layout structure:
+        if (hasTextNode) {
+            // Ex: <button id="target"> textNode </button>
+            // String is not an HTMLElement, it's just a TEXT_NODE, we can't hide it with opacity: 0
+            element.style.color = "rgba(0, 0, 0, 0)";
+        }
+        // We use element as the reference when positioning the spinner
+        if (position === "static") {
+            element.style.position = "relative";
+        }
+        // create a loading spinner from template and customize its size and color
+        const loadingTemplate = document.createElement("template");
+        loadingTemplate.setAttribute("id", LOADING_SVG_TEMPLATE_ID);
+        loadingTemplate.innerHTML = LOADING_SVG_STRING_SPINNER(color, radius);
+        // Add shadow DOM to the svg, but a/button cannot accept shadow DOM
+        const div = document.createElement("div");
+        div.id = LOADING_SVG_TEMPLATE_ID;
+        div.style.position = "absolute";
+        div.style.lineHeight = "0";
+        div.style.top = "" + topPos + "px";
+        div.style.left = "" + leftPos + "px";
+        element.appendChild(div);
+        const shadow = div.attachShadow({
+            mode: "open"
+        });
+        shadow.appendChild(loadingTemplate.content);
+    }
+}
+function getElementWithMostText(node) {
+    let maxTextNodeLength = 0;
+    let parentOfMaxTextNode = null;
+    function traverse(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            var _ref;
+            var _node_textContent;
+            const textLength = (_ref = (_node_textContent = node.textContent) == null ? void 0 : _node_textContent.trim().length) != null ? _ref : 0;
+            if (textLength > maxTextNodeLength) {
+                maxTextNodeLength = textLength;
+                parentOfMaxTextNode = node.parentNode;
+            }
+        } else {
+            for (const childNode of node.childNodes){
+                traverse(childNode);
+            }
+        }
+    }
+    traverse(node);
+    return parentOfMaxTextNode;
+}
+function applyIconLoading(element) {
+    const { color, fontSize, width, height } = getComputedStyle(element);
+    if (element instanceof HTMLElement) {
+        element.style.minWidth = width;
+        element.style.minHeight = height;
+    }
+    element.innerHTML = "";
+    // create a loading spinner from template and customize its size and color
+    const loadingTemplate = document.createElement("template");
+    loadingTemplate.setAttribute("id", LOADING_SVG_TEMPLATE_ID);
+    loadingTemplate.innerHTML = LOADING_SVG_STRING_ICON(color, fontSize);
+    // Add shadow DOM to the svg, but a/button cannot accept shadow DOM
+    const div = document.createElement("div");
+    element.appendChild(div);
+    const shadow = div.attachShadow({
+        mode: "open"
+    });
+    shadow.appendChild(loadingTemplate.content);
+}
+// The goal of this function is to replace the text content of the given element by the given text
+// The approach goes as follows
+// We search for the first text node in the child element tree
+// We replace the text node with the given text
+// We delete all the other text nodes
+// If no text nodes were found we replace the entire content of the root node with the given text
+function replaceText(element, text) {
+    let replaced = false;
+    function traverse(node) {
+        var _node_textContent;
+        // First non empty text node
+        if (node.nodeType === Node.TEXT_NODE && ((_node_textContent = node.textContent) == null ? void 0 : _node_textContent.trim()) && !replaced) {
+            node.textContent = text;
+            replaced = true;
+        } else if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = "";
+        } else {
+            node.childNodes.forEach(traverse);
+        }
+    }
+    traverse(element);
+    if (!replaced) {
+        // No text nodes were found, override everything
+        element.textContent = text;
+    }
+}
+function applySyling(element, config) {
+    // We need to make sure the styling applied to the root element also get applied to the child elements
+    function traverse(node) {
+        if (!(node instanceof HTMLElement)) {
+            return;
+        }
+        if (typeof config.backgroundColor === "string") {
+            node.style.setProperty("background-color", config.backgroundColor, "important");
+        }
+        if (typeof config.textColor === "string") {
+            node.style.setProperty("color", config.textColor, "important");
+        }
+        node.childNodes.forEach(traverse);
+    }
+    traverse(element);
+    // We only apply border color to root element
+    if (typeof config.borderColor === "string" && element instanceof HTMLElement) {
+        element.style.setProperty("border-color", config.borderColor, "important");
+    }
+}
+
+var utils_getTextContent = /* unused export */ undefined;
+var utils_isBorderCustomizationAvailable = /* unused export */ undefined;
+export { LOADING_SVG_STRING_SPINNER, applyLoading, applyPersonalization, getElementWithMostText, utils_getTextContent as getTextContent, utils_isBorderCustomizationAvailable as isBorderCustomizationAvailable };

package/src/promises.js

@@ -0,0 +1,107 @@
+// A more capable Promise: reject/resolve from outside, add cancellation and introspection.
+//
+/**
+ * Create a BetterPromise.
+ *
+ * @param executor - Optional executor function like in a normal Promise, but receives exposed resolve/reject.
+ * @returns A BetterPromise object with introspection and manual control.
+ */ function createBetterPromise(executor) {
+    if (executor === void 0) executor = ()=>{};
+    let _resolve;
+    let _reject;
+    let _isSettled = false;
+    let _isCanceled = false;
+    let settle;
+    const __settled = new Promise((r)=>settle = r);
+    const inner = new Promise((resolve, reject)=>{
+        _resolve = (value)=>{
+            _isSettled = true;
+            settle();
+            resolve(value);
+        };
+        _reject = (reason)=>{
+            _isSettled = true;
+            settle();
+            reject(reason);
+        };
+        executor(_resolve, _reject);
+    });
+    // Suppress "Uncaught (in promise)" errors if user doesn't attach .catch()
+    // immediately. This is safe because .catch() is reattached below.
+    inner.catch(()=>{});
+    const wrapper = {
+        resolve: _resolve,
+        reject: _reject,
+        cancel: (reason)=>{
+            if (reason === void 0) reason = {
+                isCanceled: true
+            };
+            if (!_isSettled) {
+                _isCanceled = true;
+                _reject(reason);
+            }
+        },
+        get isSettled () {
+            return _isSettled;
+        },
+        get isCanceled () {
+            return _isCanceled;
+        },
+        then: function then() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            return inner.then(...args);
+        },
+        catch: function _catch() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            return inner.catch(...args);
+        },
+        finally: function _finally() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            return inner.finally(...args);
+        },
+        __settled,
+        [Symbol.toStringTag]: "BetterPromise"
+    };
+    return wrapper;
+}
+/**
+ * Create a BetterPromise from a regular Promise. Useful if you want to make a cancelable promise.
+ */ function fromPromise(base) {
+    return createBetterPromise((resolve, reject)=>base.then(resolve, reject));
+}
+/**
+ * Emitter event -> Promise. Returns a BetterPromise that resolves or rejects the first time a
+ * matching event is emitted. Based on Node's EventEmitter.once
+ *
+ * @param emitter - Object with .once and .off methods
+ * @param resolveEvent - Name of event to resolve the promise
+ * @param rejectEvent - Name of event to reject the promise
+ */ function once(emitter, resolveEvent, rejectEvent) {
+    let cleanup;
+    const promise = createBetterPromise((resolve, reject)=>{
+        const onResolve = (value)=>{
+            cleanup();
+            resolve(value);
+        };
+        const onReject = (reason)=>{
+            cleanup();
+            reject(reason);
+        };
+        if (resolveEvent) emitter.once(resolveEvent, onResolve);
+        if (rejectEvent) emitter.once(rejectEvent, onReject);
+        cleanup = ()=>{
+            if (resolveEvent) emitter.off(resolveEvent, onResolve);
+            if (rejectEvent) emitter.off(rejectEvent, onReject);
+        };
+    });
+    return promise;
+}
+
+var promises_fromPromise = /* unused export */ undefined;
+export { createBetterPromise, once, promises_fromPromise as fromPromise };