@highfivve/ad-tag 5.5.4

package/lib/console/components/globalConfig.js

@@ -0,0 +1,634 @@
+import React, { Component, Fragment } from 'react';
+import { AdSlotConfig } from './adSlotConfig';
+import { Tag, TagLabel } from './tag';
+import { classList } from '../util/stringUtils';
+import { ConsentConfig } from './consentConfig';
+import { LabelConfigDebug } from './labelConfigDebug';
+import { extractPrebidAdSlotConfigs } from '../util/prebid';
+import { checkAdReloadConfig } from '../validations/adReloadValidations';
+import { checkSizesConfig } from '../validations/sizesConfigValidations';
+import { checkBucketConfig, checkSkinConfig } from '../validations/bucketValidations';
+import { getActiveEnvironmentOverride, resetEnvironmentOverrides, setEnvironmentOverrideInStorage } from '../../util/environmentOverride';
+import { getDebugDelayFromLocalStorage, setDebugDelayToLocalStorage } from 'ad-tag/util/debugDelay';
+import { removeTestSlotSizeFromLocalStorage } from 'ad-tag/util/test-slots';
+import styles from './../debug.pcss';
+import { resolveOverrides } from 'ad-tag/util/resolveOverrides';
+import { QueryParameters } from 'ad-tag/util/queryParameters';
+import { BrowserStorageKeys } from 'ad-tag/util/browserStorageKeys';
+import { calculateAdDensity } from 'ad-tag/console/util/calculateAdDensity';
+import { extractPositionFromPath } from 'ad-tag/console/util/extractPositionFromPath';
+import { getBrowserStorageValue, removeBrowserStorageValue, setBrowserStorageValue } from 'ad-tag/util/localStorage';
+const debugSidebarSelector = 'moli-debug-sidebar';
+export class GlobalConfig extends Component {
+    constructor(props) {
+        super(props);
+        this.listener = () => {
+            this.setState({ browserResized: true });
+        };
+        this.componentWillUnmount = () => {
+            this.props.windowResizeService.unregister(this);
+        };
+        this.resetEnvironmentOverrides = () => {
+            resetEnvironmentOverrides(window);
+        };
+        this.overrideEnvironmentToTest = () => {
+            setEnvironmentOverrideInStorage('test', localStorage);
+            window.location.reload();
+        };
+        this.overrideConfigVersion = (version) => {
+            window.localStorage.setItem(BrowserStorageKeys.moliVersion, version);
+            window.location.reload();
+        };
+        this.clearConfigVersionOverride = () => {
+            window.localStorage.removeItem(BrowserStorageKeys.moliVersion);
+        };
+        this.unwrapConfig = (moduleConfig, subEntry = false) => {
+            return (React.createElement(Fragment, null, Object.keys(moduleConfig).map((key, index) => {
+                const configValue = moduleConfig[key];
+                const configValueType = typeof configValue === 'object'
+                    ? Array.isArray(configValue)
+                        ? 'array'
+                        : 'object'
+                    : 'other';
+                return (React.createElement("div", { key: index, className: classList('MoliDebug-tagContainer', [
+                        subEntry,
+                        'MoliDebug-tagContainer--subEntry'
+                    ]) },
+                    React.createElement(TagLabel, null, key),
+                    configValueType === 'array' &&
+                        (configValue.length === 0 ? (React.createElement("i", null, "No values")) : (configValue.map((value, index) => typeof value === 'object' ? (this.unwrapConfig(value, true)) : (React.createElement(Tag, { variant: "green", key: index }, value !== undefined ? value.toString() : 'undefined'))))),
+                    configValueType === 'object' && this.unwrapConfig(configValue, true),
+                    configValueType === 'other' && configValue !== undefined && (React.createElement(Tag, { variant: "green" }, configValue.toString()))));
+            })));
+        };
+        this.setTheme = (theme) => this.setState({ theme }, () => this.props.themingService.applyTheme(theme));
+        this.keyValues = (keyValues) => {
+            const properties = Object.keys(keyValues);
+            return properties.length > 0 ? (React.createElement("table", { className: "MoliDebug-keyValueTable" },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, "Key"),
+                        React.createElement("th", null, "Value"))),
+                React.createElement("tbody", null, properties.map((key) => {
+                    const value = keyValues[key];
+                    return (React.createElement("tr", { key: key },
+                        React.createElement("td", null, key),
+                        React.createElement("td", null, Array.isArray(value)
+                            ? value.map(this.standardTagFromString)
+                            : this.standardTagFromString(value))));
+                })))) : (React.createElement("span", null, "No key/values config present."));
+        };
+        this.labels = (labels) => {
+            return (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                labels &&
+                    labels.map((label, index) => (React.createElement(Tag, { key: index, variant: "blue", spacing: "medium" }, label))),
+                (!labels || labels.length === 0) && React.createElement("span", null, "No labels present.")));
+        };
+        this.filterSetting = (name, filterSetting) => {
+            return (React.createElement("div", null,
+                React.createElement("strong", null, name),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement(TagLabel, null, "Bidders"),
+                    filterSetting.bidders === '*'
+                        ? this.standardTagFromString('all')
+                        : filterSetting.bidders.map(this.standardTagFromString)),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement(TagLabel, null, "Include/exclude"),
+                    this.standardTagFromString(filterSetting.filter))));
+        };
+        this.standardTagFromString = (content) => {
+            return React.createElement(Tag, { key: content }, content);
+        };
+        this.toggleSidebar = () => {
+            this.setState({ sidebarHidden: !this.state.sidebarHidden });
+        };
+        this.collapseToggle = (section) => {
+            const toggleValue = (section) => {
+                const oldVal = this.state.expandSection[section];
+                this.setState({ expandSection: { ...this.state.expandSection, [section]: !oldVal } });
+            };
+            return (React.createElement("button", { className: "MoliDebug-adSlot-button", title: `${this.state.expandSection[section] ? 'collapse' : 'expand'} ${section}`, onClick: () => toggleValue(section) }, this.state.expandSection[section] ? '⊖' : '⊕'));
+        };
+        this.iconForMessageKind = (kind) => {
+            return (React.createElement("span", { className: "MoliDebug-configMessage-icon" },
+                kind === 'error' && React.createElement("span", null, "\u2757"),
+                kind === 'warning' && React.createElement("span", null, "\u26A0"),
+                kind === 'empty' && React.createElement("span", null, "\u2714")));
+        };
+        this.reportMissingConfig = (messages) => {
+            messages.push({
+                kind: 'error',
+                text: 'No moli config found.'
+            });
+        };
+        this.checkForDuplicateOrMissingSlots = (messages, slot) => {
+            const count = document.querySelectorAll(`[id='${slot.domId}']`).length;
+            if (count > 1) {
+                messages.push({
+                    kind: 'warning',
+                    text: (React.createElement("span", null,
+                        count,
+                        " DOM elements with id ",
+                        React.createElement("strong", null, slot.domId),
+                        " found. This may lead to unexpected results."))
+                });
+            }
+            if (count === 0) {
+                messages.push({
+                    kind: 'warning',
+                    text: (React.createElement("span", null,
+                        "No DOM element with id ",
+                        React.createElement("strong", null, slot.domId),
+                        " found. Slot will not be rendered."))
+                });
+            }
+        };
+        this.checkPrebidConfig = (messages, prebid) => {
+            if (!prebid.config.consentManagement) {
+                messages.push({
+                    kind: 'error',
+                    text: 'No prebid consentManagement configuration found.'
+                });
+            }
+            if (!window.pbjs.version) {
+                messages.push({
+                    kind: 'error',
+                    text: 'No prebid instance available! Either remove the prebid configuration or add prebid to the ad tag'
+                });
+            }
+        };
+        this.checkSlotPrebidConfig = (messages, slot) => {
+            if (slot.prebid) {
+                const labels = this.props.labelConfigService.getSupportedLabels();
+                extractPrebidAdSlotConfigs(slot.prebid).forEach(prebidConfig => {
+                    const mediaTypes = prebidConfig.adUnit.mediaTypes;
+                    if (!!mediaTypes && !mediaTypes.banner && !mediaTypes.video) {
+                        messages.push({
+                            kind: 'error',
+                            text: `Prebidjs mediaTypes for slot ${slot.domId} | ${slot.adUnitPath} is empty.`
+                        });
+                    }
+                });
+            }
+        };
+        this.checkGlobalSizeConfigEntry = (messages) => (entry, _) => {
+            if (entry.labelsSupported.length === 0) {
+                messages.push({
+                    kind: 'warning',
+                    text: `No Global LabelSizeConfig entries. We recommend defining labels.`
+                });
+            }
+        };
+        this.checkForWrongPrebidCodeEntry = (messages, slot) => {
+            if (slot.prebid) {
+                const labels = this.props.labelConfigService.getSupportedLabels();
+                extractPrebidAdSlotConfigs(slot.prebid).forEach(prebidConfig => {
+                    const code = prebidConfig.adUnit.code;
+                    if (code && code !== slot.domId) {
+                        messages.push({
+                            kind: 'error',
+                            text: (React.createElement("span", null,
+                                "The ",
+                                React.createElement("code", null, "prebid.adUnit.code"),
+                                " must match the ",
+                                React.createElement("code", null, "slot.domID"),
+                                ' ',
+                                React.createElement("strong", null,
+                                    "$",
+                                    slot.domId),
+                                ", but",
+                                React.createElement("br", null),
+                                " ",
+                                React.createElement("strong", null, code),
+                                " was not ",
+                                React.createElement("strong", null, slot.domId)))
+                        });
+                    }
+                });
+            }
+        };
+        this.isSlotRendered = (slot) => !!document.getElementById(slot.domId) && this.props.labelConfigService.filterSlot(slot);
+        this.state = {
+            sidebarHidden: false,
+            expandSection: {
+                slots: true,
+                moli: true,
+                modules: false,
+                targeting: false,
+                prebid: false,
+                a9: false,
+                labelSizeConfig: false,
+                consent: false,
+                yieldOptimization: false,
+                supplyChain: false,
+                adDensity: false
+            },
+            messages: [],
+            browserResized: false,
+            showOnlyRenderedSlots: false,
+            theme: props.themingService.currentTheme(),
+            adstxtEntry: [],
+            adstxtDomain: '',
+            adstxtError: '',
+            adDensity: {
+                totalAdDensity: undefined,
+                percentagePerSlot: []
+            },
+            configVersion: 'not available'
+        };
+        if (!props.config) {
+            this.reportMissingConfig(this.state.messages);
+        }
+        else {
+            props.config.slots.forEach(slot => {
+                this.checkForDuplicateOrMissingSlots(this.state.messages, slot);
+                this.checkSlotPrebidConfig(this.state.messages, slot);
+                this.checkForWrongPrebidCodeEntry(this.state.messages, slot);
+            });
+            if (props.config.prebid) {
+                this.checkPrebidConfig(this.state.messages, props.config.prebid);
+            }
+            if (props.config.labelSizeConfig) {
+                props.config.labelSizeConfig.forEach(this.checkGlobalSizeConfigEntry(this.state.messages));
+            }
+            if (props.config.buckets) {
+                checkBucketConfig(this.state.messages, props.config.buckets, props.config.slots);
+            }
+            checkSkinConfig(this.state.messages, props.modules, props.config.slots);
+            checkAdReloadConfig(this.state.messages, props.modules, props.config.slots, this.props.labelConfigService.getSupportedLabels());
+            checkSizesConfig(this.state.messages, props.config.slots, this.props.labelConfigService.getSupportedLabels());
+            props.windowResizeService.register(this);
+        }
+    }
+    async fetchAdsTxtEntries(hostname) {
+        try {
+            if (hostname) {
+                const domain = hostname.startsWith('www.') ? hostname : `www.${hostname}`;
+                const response = await fetch(`https://${domain}/ads.txt`);
+                return await response.text();
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    refreshInterstitial(interstitialSlot) {
+        if (interstitialSlot) {
+            if (interstitialSlot.behaviour.loaded !== 'infinite') {
+                window.moli.refreshAdSlot(interstitialSlot.domId, {
+                    loaded: interstitialSlot.behaviour.loaded
+                });
+                this.toggleSidebar();
+            }
+            else {
+                console.error("Interstitial slot's loading behaviour can not be of type 'infinite'.");
+            }
+        }
+        else {
+            console.error('Interstitial slot not found in the current config.');
+        }
+    }
+    parseAdsTxtEntries(adstxtEntries) {
+        const entriesArray = adstxtEntries.split(/\r?\n/).map(entry => entry.split(',')) ?? [];
+        const publisherEntry = entriesArray
+            .filter(entry => entry.length > 1)
+            .find(entry => entry[0] === 'highfivve.com');
+        return publisherEntry;
+    }
+    async findPublisherEntryInAdsTxt(adsTxtDomain) {
+        try {
+            const adstxtEntries = await this.fetchAdsTxtEntries(adsTxtDomain);
+            if (!adstxtEntries) {
+                throw new Error('Failed to fetch ads.txt entries.');
+            }
+            this.setState({ adstxtError: '' });
+            const publisherEntry = this.parseAdsTxtEntries(adstxtEntries);
+            return publisherEntry;
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                this.setState({ adstxtError: error.message });
+            }
+            else {
+                this.setState({ adstxtError: 'An unknown error occurred.' });
+            }
+            return ['', 'error'];
+        }
+    }
+    async componentDidMount() {
+        const adsTxtDomain = this.props.config?.domain ?? window.location.hostname;
+        this.setState({
+            adstxtDomain: adsTxtDomain,
+            adstxtEntry: (await this.findPublisherEntryInAdsTxt(adsTxtDomain)) ?? [],
+            configVersion: this.props.config?.version ?? 'not available'
+        });
+    }
+    render() {
+        const { config, runtimeConfig, modules, labelConfigService } = this.props;
+        const configLabel = window.moli.configLabel ?? 'not available';
+        const currentConfigVersion = window.moli.getConfig()?.version ?? 'not available';
+        const isVersionOverridden = resolveOverrides(window, QueryParameters.moliVersion, BrowserStorageKeys.moliVersion).length >
+            0;
+        const { sidebarHidden, showOnlyRenderedSlots, expandSection, theme, adstxtEntry, adstxtDomain, adDensity } = this.state;
+        const interstitialSlot = window.moli
+            .getConfig()
+            ?.slots.find(slot => slot.position === 'interstitial');
+        const classes = classList('MoliDebug-sidebar', [sidebarHidden, 'is-hidden']);
+        const showHideMessage = `${sidebarHidden ? 'Show' : 'Hide'} moli global config panel`;
+        const isEnvironmentOverridden = !!getActiveEnvironmentOverride(window);
+        const interstitialTestKey = 'test-interstitial';
+        const isInterstitialTestEnabled = !!getBrowserStorageValue(interstitialTestKey, localStorage);
+        const debugDelay = getDebugDelayFromLocalStorage(window);
+        const isDarkTheme = theme === 'dark';
+        const switchToDarkTheme = () => this.setTheme('dark');
+        const switchToLightTheme = () => this.setTheme('light');
+        return (React.createElement("div", { id: "moli-console-global-config" },
+            React.createElement("style", null, styles),
+            React.createElement("button", { className: "MoliDebug-sidebar-closeHandle", title: showHideMessage, onClick: this.toggleSidebar },
+                sidebarHidden && React.createElement("span", null, "\u2B05 "),
+                !sidebarHidden && React.createElement("span", null, "\u00D7 "),
+                showHideMessage),
+            config && (React.createElement("div", { className: classes, "data-ref": debugSidebarSelector },
+                React.createElement("div", { className: "MoliDebug-sidebarSection  MoliDebug-sidebarSection--moli" },
+                    React.createElement("div", { className: "MoliDebug-tagContainer" },
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Config version"),
+                            React.createElement(Tag, { variant: isVersionOverridden ? 'yellow' : 'blue' }, currentConfigVersion),
+                            React.createElement("input", { type: "text", value: this.state.configVersion, placeholder: currentConfigVersion, onChange: e => {
+                                    this.setState({ configVersion: e.currentTarget.value });
+                                } }),
+                            React.createElement("button", { className: "MoliDebug-button", onClick: () => this.overrideConfigVersion(this.state.configVersion), title: "Reload" }, "load"),
+                            React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: this.clearConfigVersionOverride, title: "Reset" }, "reset")),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Config label"),
+                            React.createElement(Tag, null, configLabel)),
+                        React.createElement("br", null),
+                        React.createElement(TagLabel, null, "Appearance"),
+                        isDarkTheme && (React.createElement("button", { className: "MoliDebug-button", onClick: switchToLightTheme, title: "Switch to light theme" }, "\uD83C\uDF14 dark")),
+                        !isDarkTheme && (React.createElement("button", { className: "MoliDebug-button", onClick: switchToDarkTheme, title: "Switch to dark theme" }, "\uD83C\uDF1E light"))),
+                    React.createElement("h4", null,
+                        this.collapseToggle('moli'),
+                        "Moli ",
+                        React.createElement("span", null, window.moli.version)),
+                    expandSection.moli && (React.createElement("div", null,
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Overall Mode"),
+                            runtimeConfig.environment === 'test' ? (React.createElement(Tag, { variant: "yellow" }, "Test")) : (React.createElement(Tag, { variant: "green" }, "Production")),
+                            isEnvironmentOverridden ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: this.resetEnvironmentOverrides }, "\u25C0 Reset override")) : (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--yellow MoliDebug-button--greyText", onClick: this.overrideEnvironmentToTest }, "\u25B6 Override to test"))),
+                        interstitialSlot && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Interstitital Test Mode"),
+                            isInterstitialTestEnabled ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: () => {
+                                    removeBrowserStorageValue(interstitialTestKey, localStorage);
+                                    this.refreshInterstitial(interstitialSlot);
+                                } }, "\u25C0 Reset interstitial test")) : (React.createElement("button", { className: `MoliDebug-button MoliDebug-button--yellow MoliDebug-button--greyText ${!isEnvironmentOverridden ? 'MoliDebug-button--disabled' : ''}`, onClick: () => {
+                                    setBrowserStorageValue(interstitialTestKey, 'true', localStorage);
+                                    this.refreshInterstitial(interstitialSlot);
+                                }, disabled: !isEnvironmentOverridden }, "\u25B6 Test interstitial")),
+                            !isEnvironmentOverridden && (React.createElement("p", { className: "MoliDebug-info" }, "\u2757\uFE0FPlease activate the overall test mode before testing the interstitial.")))),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Delay loading ads (only in test environment)"),
+                            React.createElement("input", { type: "number", placeholder: "in milliseconds", value: debugDelay, list: "debug-delay-suggestions", disabled: runtimeConfig.environment !== 'test', onChange: e => setDebugDelayToLocalStorage(window, e.currentTarget.valueAsNumber) }),
+                            React.createElement("datalist", { id: "debug-delay-suggestions" },
+                                React.createElement("option", { value: 500 }),
+                                React.createElement("option", { value: 1000 }),
+                                React.createElement("option", { value: 2000 }),
+                                React.createElement("option", { value: 3000 }))),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement("button", { className: "MoliDebug-button MoliDebug-button--blue", onClick: () => {
+                                    config.slots.forEach(removeTestSlotSizeFromLocalStorage);
+                                    window.location.reload();
+                                } }, "\u25B6 Reset all test slot sizes")),
+                        modules && (React.createElement(React.Fragment, null,
+                            React.createElement("h5", null,
+                                this.collapseToggle('modules'),
+                                "Moli Modules"),
+                            expandSection.modules && (React.createElement(React.Fragment, null, Object.entries(modules).map(([module, config], index) => {
+                                const moduleConfig = config;
+                                return (React.createElement("div", { key: index },
+                                    React.createElement("div", { className: "MoliDebug-tagContainer MoliDebug-module", "data-module-key": index + 1 },
+                                        React.createElement(Tag, { variant: moduleConfig.enabled ? 'green' : 'grey' }, module)),
+                                    moduleConfig && (React.createElement(Fragment, null,
+                                        React.createElement("h6", null, "Module Config"),
+                                        this.unwrapConfig(moduleConfig))),
+                                    index !== Object.keys(modules).length - 1 && React.createElement("hr", null)));
+                            })))))))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--slots" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('slots'),
+                        "Slots"),
+                    expandSection.slots && (React.createElement("div", null,
+                        React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--grey" },
+                            "Slot sizes are annotated to show the origin of their validation state:",
+                            React.createElement("ul", null,
+                                React.createElement("li", null,
+                                    React.createElement("strong", null, "\u24C8"),
+                                    " means that the validation originates from the",
+                                    ' ',
+                                    React.createElement("strong", null, "slot's own sizeConfig"),
+                                    ","),
+                                React.createElement("li", null,
+                                    React.createElement("strong", null, "\u24BC"),
+                                    " indicates that the validation was done using the",
+                                    ' ',
+                                    React.createElement("strong", null, "global sizeConfig"),
+                                    "."))),
+                        React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--grey" },
+                            React.createElement("label", { className: "MoliDebug-checkBox" },
+                                React.createElement("input", { type: "checkbox", onChange: e => this.setState({
+                                        showOnlyRenderedSlots: e.target.checked
+                                    }) }),
+                                "Show only rendered slots")),
+                        config.slots.map((slot, index) => this.isSlotRendered(slot) || !showOnlyRenderedSlots ? (React.createElement("div", { key: index },
+                            React.createElement("strong", null, slot.behaviour.loaded),
+                            " slot with DOM ID",
+                            ' ',
+                            React.createElement("strong", null, slot.domId),
+                            React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot }))) : null)))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection  MoliDebug-sidebarSection--targeting" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('targeting'),
+                        "Targeting"),
+                    expandSection.targeting && (React.createElement("div", null,
+                        config.targeting && (React.createElement("div", null,
+                            React.createElement("h5", null, "Key/value pairs"),
+                            this.keyValues({
+                                ...config.targeting.keyValues,
+                                ...runtimeConfig.keyValues
+                            }),
+                            React.createElement("h5", null, "Labels from publisher"),
+                            this.labels([...runtimeConfig.labels, ...(config.targeting?.labels ?? [])]),
+                            React.createElement("h5", null, "Labels from label size config"),
+                            this.labels(labelConfigService
+                                .getSupportedLabels()
+                                .filter(l1 => !(config.targeting.labels || []).find(l2 => l2 === l1))))),
+                        !config.targeting && React.createElement("span", null, "No targeting config present.")))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--sizeConfig" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('labelSizeConfig'),
+                        "Label Size config"),
+                    expandSection.labelSizeConfig && (React.createElement("div", null,
+                        config.labelSizeConfig && config.labelSizeConfig.length > 0 && (React.createElement(LabelConfigDebug, { labelSizeConfig: config.labelSizeConfig })),
+                        (!config.labelSizeConfig || config.labelSizeConfig.length === 0) && (React.createElement("span", null, "No size config present."))))),
+                config.prebid && (React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--prebid" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('prebid'),
+                        "Prebid"),
+                    expandSection.prebid && (React.createElement("div", null,
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Version"),
+                            window.pbjs.version ? (React.createElement(Tag, null, window.pbjs.version.toString())) : (React.createElement(Tag, { variant: "red" }, "Prebid not found"))),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Prebid debug"),
+                            React.createElement(Tag, { variant: config.prebid.config.debug ? 'yellow' : undefined }, config.prebid.config.debug ? 'enabled' : 'disabled')),
+                        config.prebid.config.enableSendAllBids !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "sendAllBids enabled"),
+                            React.createElement(Tag, null, config.prebid.config.enableSendAllBids.toString()))),
+                        config.prebid.config.bidderTimeout && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Bidder timeout"),
+                            React.createElement(Tag, null, `${config.prebid.config.bidderTimeout.toString()}ms`))),
+                        config.prebid.config.consentManagement && (React.createElement("div", null,
+                            React.createElement("h5", null, "Consent management"),
+                            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "allowAuctionWithoutConsent"),
+                                React.createElement(Tag, null, (!!config.prebid.config.consentManagement.gdpr
+                                    ?.allowAuctionWithoutConsent ?? 'true').toString())),
+                            config.prebid.config.consentManagement.gdpr?.cmpApi && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "CMP API"),
+                                React.createElement(Tag, null, config.prebid.config.consentManagement.gdpr?.cmpApi ?? 'iab'))),
+                            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "CMP timeout"),
+                                React.createElement(Tag, null, `${config.prebid.config.consentManagement.gdpr?.timeout ?? 10000}ms`)))),
+                        config.prebid.config.userSync && (React.createElement("div", null,
+                            React.createElement("h5", null, "User sync"),
+                            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "Sync enabled"),
+                                React.createElement(Tag, null, config.prebid.config.userSync.syncEnabled === undefined
+                                    ? `${window.pbjs
+                                        .getConfig()
+                                        .userSync?.syncEnabled?.toString()} (default from prebid config - no value in moli config)`
+                                    : config.prebid.config.userSync.syncEnabled.toString())),
+                            config.prebid.config.userSync.syncDelay !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "Sync delay"),
+                                React.createElement(Tag, null, `${config.prebid.config.userSync.syncDelay}ms`))),
+                            config.prebid.config.userSync.syncsPerBidder !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "Syncs per bidder"),
+                                React.createElement(Tag, null, config.prebid.config.userSync.syncsPerBidder.toString()))),
+                            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                                React.createElement(TagLabel, null, "User sync override enabled"),
+                                React.createElement(Tag, null, (!!config.prebid.config.userSync.enableOverride).toString())),
+                            config.prebid.config.userSync.filterSettings && (React.createElement("div", null,
+                                React.createElement("h6", null, "Filter Settings"),
+                                config.prebid.config.userSync.filterSettings.all &&
+                                    this.filterSetting('All', config.prebid.config.userSync.filterSettings.all),
+                                config.prebid.config.userSync.filterSettings.iframe &&
+                                    this.filterSetting('iFrame', config.prebid.config.userSync.filterSettings.iframe),
+                                config.prebid.config.userSync.filterSettings.image &&
+                                    this.filterSetting('Image', config.prebid.config.userSync.filterSettings.image))))),
+                        React.createElement("h5", null, "Currency"),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Ad server currency"),
+                            React.createElement(Tag, null, config.prebid.config.currency?.adServerCurrency ?? 'EUR (default)')),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Granularity multiplier"),
+                            React.createElement(Tag, null, config.prebid.config.currency?.granularityMultiplier.toString() ??
+                                'not set')),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Default Rates, USD \u2192 EUR"),
+                            React.createElement(Tag, null, config.prebid.config.currency?.defaultRates.USD.EUR?.toString() ??
+                                'not set')))))),
+                config.a9 && (React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--a9" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('a9'),
+                        "A9"),
+                    expandSection.a9 && (React.createElement("div", null,
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "PubID"),
+                            React.createElement(Tag, { variant: config.a9.pubID ? 'blue' : 'red' }, config.a9.pubID)),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Timeout"),
+                            React.createElement(Tag, { variant: config.a9.timeout ? 'blue' : 'red' },
+                                config.a9.timeout.toFixed(0),
+                                "ms")),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "CMP timeout"),
+                            React.createElement(Tag, { variant: config.a9.cmpTimeout ? 'blue' : 'red' },
+                                config.a9.cmpTimeout.toFixed(0),
+                                "ms")))))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--consent" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('consent'),
+                        "Consent"),
+                    expandSection.consent && (React.createElement("div", null,
+                        React.createElement(ConsentConfig, null)))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--supplyChain" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('supplyChain'),
+                        "Supply Chain"),
+                    expandSection.supplyChain && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Seller ID (ads.txt)"),
+                            React.createElement(Tag, { variant: adstxtEntry[1] === config?.schain.supplyChainStartNode.sid ? 'green' : 'red' }, adstxtEntry[1])),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Status"),
+                            React.createElement(Tag, { variant: adstxtEntry[2] ? 'blue' : 'red' }, adstxtEntry[2])),
+                        React.createElement("p", { className: "MoliDebug-info" }, config?.schain.supplyChainStartNode.sid === adstxtEntry[1]
+                            ? `✅ Seller ids in ad tag config and ads.txt of domain ${adstxtDomain} are matching!`
+                            : `❗️Seller ids in ad tag config (${config?.schain.supplyChainStartNode.sid}) and ads.txt of current domain (${adstxtDomain}, ${adstxtEntry[1]}) are different!`),
+                        this.state.adstxtError !== '' && (React.createElement("p", { className: "MoliDebug-panel MoliDebug-panel--red" }, `${this.state.adstxtError} If you use this console locally or on the demo page, try to enable CORS by using a CORS unblocking browser extension.`)),
+                        React.createElement("form", { className: "MoliDebug-formContainer MoliDebug-panel MoliDebug-panel--blue", onSubmit: async (event) => {
+                                event.preventDefault();
+                                const newAdsTxtDomain = event.target[0].value;
+                                this.setState({
+                                    adstxtDomain: newAdsTxtDomain,
+                                    adstxtEntry: (await this.findPublisherEntryInAdsTxt(newAdsTxtDomain)) ?? []
+                                });
+                            } },
+                            React.createElement("label", { htmlFor: "newDomain" }, "Use different ads.txt domain for seller id comparison:"),
+                            React.createElement("div", null,
+                                React.createElement("input", { type: "text", placeholder: "Enter new domain", name: "newDomain", id: "newDomain" }),
+                                React.createElement("button", { className: "MoliDebug-button", type: "submit" }, "Go!")))))),
+                React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--supplyChain" },
+                    React.createElement("h4", null,
+                        this.collapseToggle('adDensity'),
+                        "Ad Density"),
+                    expandSection.adDensity && (React.createElement(React.Fragment, null,
+                        React.createElement("form", { className: "MoliDebug-formContainer MoliDebug-panel MoliDebug-panel--blue", onSubmit: async (event) => {
+                                event.preventDefault();
+                                const contentSelector = event.target[0].value;
+                                const { totalAdDensity, adAreaPerSlot } = calculateAdDensity(contentSelector, undefined);
+                                const percentagePerSlot = adAreaPerSlot.map(adArea => {
+                                    if (!adArea || !adDensity.totalAdDensity) {
+                                        return {
+                                            adSlotId: adArea?.adSlot ? adArea.adSlot : 'unknown',
+                                            percentage: '0.00'
+                                        };
+                                    }
+                                    return {
+                                        adSlotId: adArea.adSlot,
+                                        percentage: ((adArea.adArea / adDensity.totalAdDensity) * 100).toFixed(2)
+                                    };
+                                });
+                                this.setState({
+                                    adDensity: { totalAdDensity, percentagePerSlot }
+                                });
+                            } },
+                            React.createElement("label", { htmlFor: "adDensitySelector" }, "Calculate ad density of the content element"),
+                            React.createElement("div", null,
+                                React.createElement("input", { type: "text", placeholder: "Enter CSS selector", name: "adDensitySelector", id: "adDensitySelector" }),
+                                React.createElement("button", { className: "MoliDebug-button", type: "submit" }, "Go!"))),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement(TagLabel, null, "Ad Density"),
+                            React.createElement(Tag, { variant: 'green' }, adDensity.totalAdDensity)),
+                        adDensity.percentagePerSlot.length > 0 && (React.createElement(React.Fragment, null,
+                            React.createElement("hr", null),
+                            React.createElement("h4", null, "Percentage of ad slot area on total ad area"),
+                            adDensity.percentagePerSlot.map(percentage => {
+                                return (React.createElement("div", { className: "MoliDebug-tagContainer", key: percentage.adSlotId },
+                                    React.createElement(TagLabel, null, extractPositionFromPath(percentage.adSlotId)),
+                                    React.createElement(Tag, { variant: 'green' },
+                                        percentage.percentage,
+                                        "%")));
+                            }),
+                            React.createElement("hr", null))))))))));
+    }
+}