@highfivve/ad-tag 5.8.30 → 5.8.32

package/lib/console/components/labelConfigDebug.js

@@ -1,19 +1,19 @@
 import React from 'react';
-import { Tag } from './tag';
-import { classList } from '../util/stringUtils';
+import { Tag, TagLabel } from './tag';
+import { TagContainer } from './ui';
 export const LabelConfigDebug = ({ labelSizeConfig }) => {
     return (React.createElement("div", null, labelSizeConfig.map((labelSizeConfigEntry, idx) => {
         const mediaQueryMatches = window.matchMedia(labelSizeConfigEntry.mediaQuery).matches;
-        return (React.createElement("div", { key: idx, className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--noBorder" },
+        return (React.createElement("div", { key: idx, className: "mb-2" },
             "Entry ",
             React.createElement("strong", null,
                 "#",
                 idx + 1),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Media query"),
-                React.createElement("div", { className: classList('MoliDebug-tag', [mediaQueryMatches, 'MoliDebug-tag--green'], [!mediaQueryMatches, 'MoliDebug-tag--red']), title: `Media query ${mediaQueryMatches ? 'matches' : "doesn't match"}` }, labelSizeConfigEntry.mediaQuery)),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Supported labels"),
+            React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Media query"),
+                React.createElement(Tag, { variant: mediaQueryMatches ? 'green' : 'red', title: `Media query ${mediaQueryMatches ? 'matches' : "doesn't match"}` }, labelSizeConfigEntry.mediaQuery)),
+            React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Supported labels"),
                 labelSizeConfigEntry.labelsSupported.map(label => (React.createElement(Tag, { key: label }, label))))));
     })));
 };

package/lib/console/components/moduleConfigs.js

@@ -0,0 +1,359 @@
+import React, { Fragment } from 'react';
+import { Tag, TagLabel } from './tag';
+import { SubHeadline, TagContainer } from './ui';
+const BoolTag = ({ value, trueLabel, falseLabel }) => (React.createElement(Tag, { variant: value ? 'green' : 'grey' }, value ? (trueLabel ?? 'yes') : (falseLabel ?? 'no')));
+const Row = ({ label, subEntry, children }) => (React.createElement(TagContainer, { subEntry: subEntry },
+    React.createElement(TagLabel, null, label),
+    children));
+const ListTags = ({ values, variant }) => values && values.length > 0 ? (React.createElement(React.Fragment, null, values.map((value, index) => (React.createElement(Tag, { key: index, variant: variant ?? 'blue' }, value))))) : (React.createElement("i", null, "none"));
+const AdexModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Customer / Tag ID" },
+        React.createElement(Tag, null, config.adexCustomerId),
+        React.createElement(Tag, null, config.adexTagId)),
+    React.createElement(Row, { label: "App name" },
+        React.createElement(Tag, null, config.appName)),
+    React.createElement(Row, { label: "SPA mode" },
+        React.createElement(BoolTag, { value: config.spaMode })),
+    React.createElement(Row, { label: "Mappings" }, config.mappingDefinitions.length === 0 ? (React.createElement("i", null, "none")) : (config.mappingDefinitions.map((mapping, index) => (React.createElement(Tag, { key: index, variant: "grey" },
+        mapping.key,
+        " \u2192 ",
+        mapping.attribute,
+        " (",
+        mapping.adexValueType,
+        ")"))))),
+    config.enabledPartners && (React.createElement(Row, { label: "Cookie matching partners" },
+        React.createElement(ListTags, { values: config.enabledPartners }))),
+    config.appConfig && (React.createElement(Row, { label: "App config keys" },
+        React.createElement(Tag, { variant: "grey" },
+            "clientType: ",
+            config.appConfig.clientTypeKey),
+        React.createElement(Tag, { variant: "grey" },
+            "advertiserId: ",
+            config.appConfig.advertiserIdKey),
+        config.appConfig.adexMobileTagId && (React.createElement(Tag, { variant: "grey" },
+            "mobileTagId: ",
+            config.appConfig.adexMobileTagId))))));
+const AdReloadModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Refresh interval" },
+        React.createElement(Tag, null, config.refreshIntervalMs !== undefined ? `${config.refreshIntervalMs}ms` : 'default')),
+    React.createElement(Row, { label: "User activity level" },
+        React.createElement(Tag, { variant: "grey" }, config.userActivityLevelControl?.level ?? 'default')),
+    React.createElement(Row, { label: "Visibility checks" },
+        React.createElement(BoolTag, { value: !config.disableAdVisibilityChecks, trueLabel: "enabled", falseLabel: "disabled" })),
+    React.createElement(Row, { label: "Excluded slots" },
+        React.createElement(ListTags, { values: config.excludeAdSlotDomIds, variant: "grey" })),
+    React.createElement(Row, { label: "CLS optimized slots" },
+        React.createElement(ListTags, { values: config.optimizeClsScoreDomIds, variant: "grey" })),
+    React.createElement(Row, { label: "Advertisers (include)" },
+        React.createElement(ListTags, { values: config.includeAdvertiserIds, variant: "green" })),
+    React.createElement(Row, { label: "Yield groups (include)" },
+        React.createElement(ListTags, { values: config.includeYieldGroupIds, variant: "green" })),
+    React.createElement(Row, { label: "Orders (include)" },
+        React.createElement(ListTags, { values: config.includeOrderIds, variant: "green" })),
+    React.createElement(Row, { label: "Orders (exclude)" },
+        React.createElement(ListTags, { values: config.excludeOrderIds, variant: "grey" })),
+    config.refreshIntervalMsOverrides &&
+        Object.keys(config.refreshIntervalMsOverrides).length > 0 && (React.createElement(React.Fragment, null,
+        React.createElement(SubHeadline, null, "Refresh interval overrides"),
+        Object.entries(config.refreshIntervalMsOverrides).map(([domId, override]) => (React.createElement(Row, { key: domId, label: domId, subEntry: true }, typeof override === 'number' ? (React.createElement(Tag, null,
+            override,
+            "ms")) : (React.createElement(React.Fragment, null,
+            override.default !== undefined && React.createElement(Tag, null,
+                "default ",
+                override.default,
+                "ms"),
+            override.bidders &&
+                Object.entries(override.bidders).map(([bidder, interval]) => (React.createElement(Tag, { key: bidder, variant: "grey" },
+                    bidder,
+                    ": ",
+                    interval,
+                    "ms")))))))))),
+    config.viewabilityOverrides && Object.keys(config.viewabilityOverrides).length > 0 && (React.createElement(React.Fragment, null,
+        React.createElement(SubHeadline, null, "Viewability overrides"),
+        Object.entries(config.viewabilityOverrides).map(([domId, override]) => (React.createElement(Row, { key: domId, label: domId, subEntry: true },
+            override?.variant === 'css' && React.createElement(Tag, { variant: "grey" },
+                "css: ",
+                override.cssSelector),
+            override?.variant === 'disabled' && React.createElement(Tag, { variant: "yellow" }, "checks disabled"),
+            override?.refreshBucket && React.createElement(Tag, { variant: "yellow" }, "refreshes bucket"))))))));
+const BlocklistModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Mode" },
+        React.createElement(Tag, { variant: config.mode === 'block' ? 'red' : 'yellow' }, config.mode)),
+    React.createElement(Row, { label: "Provider" },
+        React.createElement(Tag, { variant: "grey" }, config.blocklist.provider),
+        config.blocklist.provider === 'dynamic' && React.createElement(Tag, null, config.blocklist.endpoint)),
+    config.blocklist.provider === 'static' && (React.createElement(React.Fragment, null,
+        React.createElement(Row, { label: "Blocked URL patterns" },
+            React.createElement(ListTags, { values: config.blocklist.blocklist.urls.map(entry => `${entry.matchType}: ${entry.pattern}`), variant: "grey" })),
+        config.blocklist.blocklist.labels && config.blocklist.blocklist.labels.length > 0 && (React.createElement(Row, { label: "Dynamic labels" },
+            React.createElement(ListTags, { values: config.blocklist.blocklist.labels.map(entry => `${entry.label} (${entry.matchType}${entry.reverseMatch ? ', reversed' : ''})`), variant: "grey" }))))),
+    config.mode === 'key-value' && (React.createElement(Row, { label: "Key value" },
+        React.createElement(Tag, null,
+            config.key,
+            " = ",
+            config.isBlocklistedValue ?? 'true')))));
+const CleanupModule = ({ config }) => (React.createElement(React.Fragment, null,
+    config.configs.length === 0 && React.createElement("i", null, "No cleanup configs"),
+    config.configs.map((cleanupConfig, index) => (React.createElement(Row, { key: index, label: cleanupConfig.domId },
+        React.createElement(Tag, { variant: "blue" }, cleanupConfig.bidder),
+        'cssSelectors' in cleanupConfig.deleteMethod ? (React.createElement(Tag, { variant: "grey" },
+            "css: ",
+            cleanupConfig.deleteMethod.cssSelectors.join(', '))) : (React.createElement(Tag, { variant: "yellow" },
+            "JS snippet (",
+            cleanupConfig.deleteMethod.jsAsString.length,
+            ")")))))));
+const CustomModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Inline JS" }, config.inlineJs ? (React.createElement(Tag, { variant: "yellow" },
+        config.inlineJs.code.length,
+        " chars")) : (React.createElement("i", null, "none"))),
+    (config.scripts ?? []).map((script, index) => (React.createElement(Row, { key: index, label: `Script #${index + 1}` },
+        React.createElement(Tag, null, script.src),
+        script.consent && React.createElement(Tag, { variant: "green" },
+            "GVL vendor ",
+            script.consent.vendorId),
+        script.labelAll && React.createElement(Tag, { variant: "grey" },
+            "labelAll: ",
+            script.labelAll.join(', ')),
+        script.labelAny && React.createElement(Tag, { variant: "grey" },
+            "labelAny: ",
+            script.labelAny.join(', ')))))));
+const ConfiantModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Asset URL" },
+        React.createElement(Tag, null, config.assetUrl)),
+    React.createElement(Row, { label: "GVLID check" },
+        React.createElement(BoolTag, { value: config.checkGVLID, trueLabel: "enabled", falseLabel: "disabled" }))));
+const EmetriqModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Platform" },
+        React.createElement(Tag, { variant: "blue" }, config.os)),
+    config.os === 'web' ? (React.createElement(Row, { label: "SID" },
+        React.createElement(Tag, null, config._enqAdpParam.sid))) : (React.createElement(React.Fragment, null,
+        React.createElement(Row, { label: "SID / App ID" },
+            React.createElement(Tag, null, config.sid),
+            React.createElement(Tag, null, config.appId)),
+        React.createElement(Row, { label: "Advertiser ID key" },
+            React.createElement(Tag, { variant: "grey" }, config.advertiserIdKey)))),
+    React.createElement(Row, { label: "Sync delay" },
+        React.createElement(Tag, { variant: "grey" }, config.syncDelay === undefined
+            ? 'none'
+            : config.syncDelay === 'pbjs'
+                ? 'prebid auctionEnd'
+                : `${config.syncDelay}ms`)),
+    config.customMappingDefinition && config.customMappingDefinition.length > 0 && (React.createElement(Row, { label: "Custom mappings" },
+        React.createElement(ListTags, { values: config.customMappingDefinition.map(mapping => `${mapping.key} → ${mapping.param}`), variant: "grey" }))),
+    config.login && (React.createElement(Row, { label: "Login events" },
+        React.createElement(Tag, { variant: "green" },
+            "partner: ",
+            config.login.partner),
+        config.login.guid && React.createElement(Tag, { variant: "grey" }, "guid set")))));
+const GeoEdgeModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Publisher key" },
+        React.createElement(Tag, null, config.key)),
+    React.createElement(Row, { label: "GVLID check" },
+        React.createElement(BoolTag, { value: config.checkGVLID, trueLabel: "enabled", falseLabel: "disabled" })),
+    config.cfg?.advs && (React.createElement(Row, { label: "Advertiser filter" },
+        React.createElement(ListTags, { values: Object.keys(config.cfg.advs), variant: "grey" }))),
+    config.cfg?.pubIds && (React.createElement(Row, { label: "AdX/AdSense filter" },
+        React.createElement(ListTags, { values: Object.keys(config.cfg.pubIds), variant: "grey" })))));
+const IdentityLinkModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "LaunchPad ID" },
+        React.createElement(Tag, null, config.launchPadId)),
+    React.createElement(Row, { label: "Email hashes" },
+        React.createElement(Tag, { variant: config.hashedEmailAddresses.length > 0 ? 'green' : 'grey' },
+            config.hashedEmailAddresses.length,
+            " provided"))));
+const PubstackModule = ({ config }) => (React.createElement(Row, { label: "Tag ID" },
+    React.createElement(Tag, null, config.tagId)));
+const SkinModule = ({ config }) => (React.createElement(React.Fragment, null, config.configs.map((skinConfig, index) => (React.createElement(Fragment, { key: index },
+    config.configs.length > 1 && React.createElement(SubHeadline, null,
+        "Config #",
+        index + 1),
+    React.createElement(Row, { label: "Skin slot" },
+        React.createElement(Tag, null, skinConfig.skinAdSlotDomId),
+        skinConfig.hideSkinAdSlot && React.createElement(Tag, { variant: "yellow" }, "hidden"),
+        skinConfig.destroySkinSlot && React.createElement(Tag, { variant: "yellow" }, "destroyed")),
+    React.createElement(Row, { label: "Blocked slots" },
+        React.createElement(ListTags, { values: skinConfig.blockedAdSlotDomIds, variant: "grey" })),
+    React.createElement(Row, { label: "Format filters" },
+        React.createElement(ListTags, { values: skinConfig.formatFilter.map(filter => 'auid' in filter && filter.auid !== undefined
+                ? `${filter.bidder} (auid ${filter.auid})`
+                : filter.bidder) })),
+    React.createElement(Row, { label: "CPM comparison" },
+        React.createElement(BoolTag, { value: skinConfig.enableCpmComparison, trueLabel: "enforcing", falseLabel: "logging only" })),
+    skinConfig.targeting && (React.createElement(Row, { label: "Targeting" },
+        React.createElement(Tag, { variant: "grey" },
+            skinConfig.targeting.key,
+            " = ",
+            skinConfig.targeting.value ?? '1'))))))));
+const StickyHeaderAdModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Header slot" },
+        React.createElement(Tag, null, config.headerAdDomId),
+        config.destroySlot && React.createElement(Tag, { variant: "yellow" }, "destroys slot")),
+    React.createElement(Row, { label: "Fade out" },
+        config.fadeOutTrigger === false ? (React.createElement(Tag, { variant: "grey" }, "always visible")) : (React.createElement(Tag, { variant: "grey" },
+            "on ",
+            config.fadeOutTrigger.selector)),
+        React.createElement(Tag, { variant: "grey" },
+            "class: ",
+            config.fadeOutClassName)),
+    config.minVisibleDurationMs !== undefined && (React.createElement(Row, { label: "Min visible duration" },
+        React.createElement(Tag, null,
+            config.minVisibleDurationMs,
+            "ms"))),
+    config.navbarConfig && (React.createElement(Row, { label: "Navbar" },
+        React.createElement(Tag, { variant: "grey" }, config.navbarConfig.selector))),
+    React.createElement(Row, { label: "Disallowed advertisers" },
+        React.createElement(ListTags, { values: config.disallowedAdvertiserIds, variant: "grey" }))));
+const StickyFooterAdModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Mobile sticky slot" },
+        config.mobileStickyDomId ? React.createElement(Tag, null, config.mobileStickyDomId) : React.createElement("i", null, "none"),
+        config.initiallyHidden && React.createElement(Tag, { variant: "grey" }, "initially hidden")),
+    React.createElement(Row, { label: "Desktop floor ad slot" }, config.desktopFloorAdDomId ? React.createElement(Tag, null, config.desktopFloorAdDomId) : React.createElement("i", null, "none")),
+    React.createElement(Row, { label: "Disallowed advertisers" },
+        React.createElement(ListTags, { values: config.disallowedAdvertiserIds, variant: "grey" }))));
+const StickyFooterAdV2Module = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Footer slots" }, Object.entries(config.stickyFooterDomIds).length === 0 ? (React.createElement("i", null, "none")) : (Object.entries(config.stickyFooterDomIds).map(([device, domId]) => (React.createElement(Tag, { key: device, variant: "blue" },
+        device,
+        ": ",
+        domId))))),
+    config.closingButtonText && (React.createElement(Row, { label: "Close button text" },
+        React.createElement(Tag, { variant: "grey" }, config.closingButtonText))),
+    React.createElement(Row, { label: "Disallowed advertisers" },
+        React.createElement(ListTags, { values: config.disallowedAdvertiserIds, variant: "grey" }))));
+const UtiqModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Asset URL" }, config.assetUrl ? React.createElement(Tag, null, config.assetUrl) : React.createElement("i", null, "default")),
+    React.createElement(Row, { label: "Delay" }, config.delay?.enabled ? (React.createElement(Tag, { variant: "yellow" },
+        "after ",
+        config.delay.minAdRequests ?? 0,
+        " ad requests")) : (React.createElement(Tag, { variant: "grey" }, "none"))),
+    config.options?.CMP === 'none' && (React.createElement(Row, { label: "CMP pop-up" },
+        React.createElement(Tag, { variant: "yellow" }, "suppressed"))),
+    config.userIdConfig?.emetriq && (React.createElement(Row, { label: "Emetriq integration" },
+        React.createElement(Tag, null,
+            "sid: ",
+            config.userIdConfig.emetriq.sid)))));
+const PrebidFirstPartyDataModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "IAB data provider" }, config.iabDataProviderName ? React.createElement(Tag, null, config.iabDataProviderName) : React.createElement("i", null, "not set")),
+    React.createElement(Row, { label: "Static first party data" },
+        React.createElement(BoolTag, { value: !!config.staticPrebidFirstPartyData, trueLabel: "provided", falseLabel: "none" })),
+    config.gptTargetingMappings && (React.createElement(Row, { label: "GPT targeting mappings" },
+        React.createElement(ListTags, { values: Object.entries(config.gptTargetingMappings).map(([property, key]) => `${key} → ${property}`), variant: "grey" })))));
+const YieldOptimizationModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Provider" },
+        React.createElement(Tag, { variant: config.provider === 'none' ? 'grey' : 'blue' }, config.provider)),
+    config.provider === 'static' && (React.createElement(Row, { label: "Price rules" },
+        React.createElement(Tag, null,
+            Object.keys(config.config.rules).length,
+            " ad units"))),
+    config.provider === 'dynamic' && (React.createElement(React.Fragment, null,
+        React.createElement(Row, { label: "Endpoint" },
+            React.createElement(Tag, null, config.configEndpoint)),
+        React.createElement(Row, { label: "Excluded ad units" },
+            React.createElement(ListTags, { values: config.excludedAdUnitPaths, variant: "grey" })),
+        config.dynamicFloorPrices && (React.createElement(Row, { label: "Dynamic floors" },
+            React.createElement(Tag, { variant: "grey" },
+                "strategy: ",
+                config.dynamicFloorPrices.strategy),
+            React.createElement(Tag, { variant: "grey" },
+                "rounding: ",
+                config.dynamicFloorPrices.roundingStepsInCents,
+                " cent steps")))))));
+const LazyLoadModule = ({ config }) => {
+    const optionTags = (options) => (React.createElement(React.Fragment, null,
+        options.rootId && React.createElement(Tag, { variant: "grey" },
+            "root: ",
+            options.rootId),
+        options.rootMargin && React.createElement(Tag, { variant: "grey" },
+            "margin: ",
+            options.rootMargin),
+        options.threshold !== undefined && React.createElement(Tag, { variant: "grey" },
+            "threshold: ",
+            options.threshold)));
+    return (React.createElement(React.Fragment, null,
+        config.slots.map((slotConfig, index) => (React.createElement(Row, { key: index, label: "Slots" },
+            React.createElement(ListTags, { values: slotConfig.domIds }),
+            optionTags(slotConfig.options)))),
+        config.buckets.map((bucketConfig, index) => (React.createElement(Row, { key: index, label: "Bucket" },
+            React.createElement(Tag, { variant: "blue" }, bucketConfig.bucket),
+            React.createElement(Tag, { variant: "grey" },
+                "observes: ",
+                bucketConfig.observedDomId),
+            optionTags(bucketConfig.options)))),
+        (config.infiniteSlots ?? []).map((infiniteConfig, index) => (React.createElement(Row, { key: index, label: "Infinite slots" },
+            React.createElement(Tag, { variant: "blue" }, infiniteConfig.selector),
+            optionTags(infiniteConfig.options))))));
+};
+const ZeotapModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Asset URL" },
+        React.createElement(Tag, null, config.assetUrl)),
+    React.createElement(Row, { label: "Mode" },
+        React.createElement(Tag, { variant: "blue" }, config.mode),
+        config.countryCode && React.createElement(Tag, { variant: "grey" }, config.countryCode)),
+    React.createElement(Row, { label: "ID+ (hashed email)" },
+        React.createElement(BoolTag, { value: !!config.hashedEmailAddress, trueLabel: "active", falseLabel: "inactive" })),
+    React.createElement(Row, { label: "Data key values" },
+        React.createElement(ListTags, { values: config.dataKeyValues.map(pair => `${pair.keyValueKey} → ${pair.parameterKey}`), variant: "grey" })),
+    React.createElement(Row, { label: "Exclusions" },
+        React.createElement(ListTags, { values: config.exclusionKeyValues.map(pair => `${pair.keyValueKey}=${pair.disableOnValue}`), variant: "grey" }))));
+const InterstitialModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Interstitial slot" },
+        React.createElement(Tag, null, config.interstitialDomId)),
+    React.createElement(Row, { label: "Auto close" }, config.closeAutomaticallyAfterMs !== undefined ? (React.createElement(Tag, null,
+        config.closeAutomaticallyAfterMs,
+        "ms")) : (React.createElement("i", null, "never"))),
+    React.createElement(Row, { label: "Disallowed advertisers" },
+        React.createElement(ListTags, { values: config.disallowedAdvertiserIds, variant: "grey" }))));
+const MoliAnalyticsModule = ({ config }) => (React.createElement(React.Fragment, null,
+    React.createElement(Row, { label: "Publisher" },
+        React.createElement(Tag, null, config.publisher)),
+    React.createElement(Row, { label: "Collection URL" },
+        React.createElement(Tag, null, config.url)),
+    React.createElement(Row, { label: "Batching" },
+        React.createElement(Tag, { variant: "grey" },
+            "size: ",
+            config.batchSize ?? 1),
+        React.createElement(Tag, { variant: "grey" },
+            "delay: ",
+            config.batchDelay ?? 100,
+            "ms"))));
+const GenericModule = ({ config, subEntry }) => (React.createElement(React.Fragment, null, Object.entries(config)
+    .filter(([key]) => key !== 'enabled')
+    .map(([key, value]) => (React.createElement(TagContainer, { key: key, subEntry: subEntry },
+    React.createElement(TagLabel, null, key),
+    value === undefined || value === null ? (React.createElement("i", null, "not set")) : Array.isArray(value) ? (value.length === 0 ? (React.createElement("i", null, "none")) : (value.map((entry, index) => typeof entry === 'object' && entry !== null ? (React.createElement(GenericModule, { key: index, config: entry, subEntry: true })) : (React.createElement(Tag, { key: index, variant: "grey" }, String(entry)))))) : typeof value === 'object' ? (React.createElement(GenericModule, { config: value, subEntry: true })) : (React.createElement(Tag, { variant: "grey" }, String(value))))))));
+const moduleComponents = {
+    adex: AdexModule,
+    adReload: AdReloadModule,
+    blocklist: BlocklistModule,
+    cleanup: CleanupModule,
+    custom: CustomModule,
+    confiant: ConfiantModule,
+    emetriq: EmetriqModule,
+    geoedge: GeoEdgeModule,
+    identitylink: IdentityLinkModule,
+    pubstack: PubstackModule,
+    skin: SkinModule,
+    stickyHeaderAd: StickyHeaderAdModule,
+    utiq: UtiqModule,
+    prebidFirstPartyData: PrebidFirstPartyDataModule,
+    yieldOptimization: YieldOptimizationModule,
+    stickyFooterAd: StickyFooterAdModule,
+    stickyFooterAdV2: StickyFooterAdV2Module,
+    lazyload: LazyLoadModule,
+    zeotap: ZeotapModule,
+    interstitial: InterstitialModule,
+    moliAnalytics: MoliAnalyticsModule
+};
+const ModuleConfigCard = ({ name, config }) => {
+    const ModuleComponent = moduleComponents[name];
+    return (React.createElement("div", { className: "d-collapse d-collapse-arrow mb-2 rounded-md bg-base-200" },
+        React.createElement("input", { type: "checkbox", "aria-label": `toggle module ${name}` }),
+        React.createElement("div", { className: "d-collapse-title min-h-0 py-2 text-sm font-semibold" },
+            name,
+            ' ',
+            React.createElement(Tag, { variant: config.enabled ? 'green' : 'grey' }, config.enabled ? 'enabled' : 'disabled')),
+        React.createElement("div", { className: "d-collapse-content text-sm" }, ModuleComponent ? React.createElement(ModuleComponent, { config: config }) : React.createElement(GenericModule, { config: config }))));
+};
+export const ModuleConfigs = ({ modules: modulesConfig }) => {
+    const entries = Object.entries(modulesConfig);
+    return entries.length === 0 ? (React.createElement("span", null, "No modules configured.")) : (React.createElement(React.Fragment, null, entries.map(([name, config]) => (React.createElement(ModuleConfigCard, { key: name, name: name, config: config })))));
+};

package/lib/console/components/sizeConfigDebug.js

@@ -1,31 +1,31 @@
 import React from 'react';
-import { Tag } from './tag';
-import { classList } from '../util/stringUtils';
+import { Tag, TagLabel } from './tag';
+import { TagContainer } from './ui';
 export const SizeConfigDebug = ({ sizeConfig, supportedLabels }) => {
     return (React.createElement("div", null, sizeConfig.map((sizeConfigEntry, idx) => {
         const mediaQueryMatches = window.matchMedia(sizeConfigEntry.mediaQuery).matches;
-        return (React.createElement("div", { key: idx, className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--noBorder" },
+        return (React.createElement("div", { key: idx, className: "mb-2" },
             "Entry ",
             React.createElement("strong", null,
                 "#",
                 idx + 1),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Media query"),
-                React.createElement("div", { className: classList('MoliDebug-tag', [mediaQueryMatches, 'MoliDebug-tag--green'], [!mediaQueryMatches, 'MoliDebug-tag--red']), title: `Media query ${mediaQueryMatches ? 'matches' : "doesn't match"}` }, sizeConfigEntry.mediaQuery)),
-            sizeConfigEntry.labelAll && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Label All"),
+            React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Media query"),
+                React.createElement(Tag, { variant: mediaQueryMatches ? 'green' : 'red', title: `Media query ${mediaQueryMatches ? 'matches' : "doesn't match"}` }, sizeConfigEntry.mediaQuery)),
+            sizeConfigEntry.labelAll && (React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Label All"),
                 sizeConfigEntry.labelAll.map(label => {
                     const labelMatches = supportedLabels.includes(label);
-                    return (React.createElement("div", { key: label, className: classList('MoliDebug-tag', [labelMatches, 'MoliDebug-tag--green'], [!labelMatches, 'MoliDebug-tag--red']), title: `Labels ${labelMatches ? 'match' : "don't match"}` }, label));
+                    return (React.createElement(Tag, { key: label, variant: labelMatches ? 'green' : 'red', title: `Labels ${labelMatches ? 'match' : "don't match"}` }, label));
                 }))),
-            sizeConfigEntry.labelNone && (React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Label None"),
+            sizeConfigEntry.labelNone && (React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Label None"),
                 sizeConfigEntry.labelNone.map(label => {
                     const labelMatches = supportedLabels.includes(label);
-                    return (React.createElement("div", { key: label, className: classList('MoliDebug-tag', [!labelMatches, 'MoliDebug-tag--green'], [labelMatches, 'MoliDebug-tag--red']), title: `Labels ${labelMatches ? 'match' : "don't match"}` }, label));
+                    return (React.createElement(Tag, { key: label, variant: labelMatches ? 'red' : 'green', title: `Labels ${labelMatches ? 'match' : "don't match"}` }, label));
                 }))),
-            React.createElement("div", { className: "MoliDebug-tagContainer" },
-                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Supported slot sizes"),
+            React.createElement(TagContainer, null,
+                React.createElement(TagLabel, null, "Supported slot sizes"),
                 sizeConfigEntry.sizesSupported.map((slotSize) => {
                     const sizeString = slotSize === 'fluid' ? slotSize : `${slotSize[0]}x${slotSize[1]}`;
                     return React.createElement(Tag, { key: sizeString }, sizeString);

package/lib/console/components/tag.js

@@ -1,4 +1,13 @@
 import React from 'react';
 import { classList } from '../util/stringUtils';
-export const Tag = ({ children, variant, title, spacing }) => (React.createElement("div", { className: classList('MoliDebug-tag', [!!variant, `MoliDebug-tag--${variant}`], [!!spacing, `MoliDebug-tag--${spacing}Spacing`]), title: title }, children));
-export const TagLabel = ({ children }) => (React.createElement("span", { className: "MoliDebug-tagLabel" }, children));
+const variantClasses = {
+    secondary: 'd-badge-secondary',
+    green: 'd-badge-success text-white',
+    red: 'd-badge-error text-white',
+    yellow: 'd-badge-warning',
+    blue: 'd-badge-outline d-badge-primary',
+    grey: 'd-badge-neutral',
+    transparent: 'd-badge-ghost'
+};
+export const Tag = ({ children, variant, title, spacing }) => (React.createElement("div", { className: classList('d-badge d-badge-sm ml-1 h-auto min-h-5 whitespace-normal break-all text-left', variantClasses[variant ?? 'blue'], [spacing === 'medium', 'mb-1']), title: title }, children));
+export const TagLabel = ({ children }) => (React.createElement("span", { className: "inline-block min-w-36 max-w-96 pr-1 align-middle font-medium" }, children));

package/lib/console/components/ui.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { classList } from '../util/stringUtils';
+const sectionAccent = {
+    moli: 'border-l-[#998fc7]',
+    slots: 'border-l-[#506684]',
+    targeting: 'border-l-[#998fc7]',
+    sizeConfig: 'border-l-[#d4c2fc]',
+    modules: 'border-l-[#8a7de0]',
+    prebid: 'border-l-[#76949f]',
+    a9: 'border-l-[#ea9445]',
+    consent: 'border-l-[#d9f4c7]',
+    supplyChain: 'border-l-[#82dad8]',
+    adDensity: 'border-l-[#f176af]',
+    validation: 'border-l-[#f4ef88]'
+};
+export const Block = ({ title, color, children }) => (React.createElement("section", { className: classList('mb-4 border-l-4 bg-base-100 pl-3', sectionAccent[color]) },
+    React.createElement("h4", { className: "mb-1 text-base font-semibold" }, title),
+    React.createElement("div", { className: "pb-1 text-sm" }, children)));
+export const Tabs = ({ tabs, active, onSelect, className }) => (React.createElement("div", { role: "tablist", className: classList('d-tabs d-tabs-bordered w-full', className ?? '') }, tabs.map(tab => (React.createElement("button", { key: tab.id, role: "tab", "aria-selected": tab.id === active, className: classList('d-tab border-x-0 border-t-0 bg-transparent font-semibold', [
+        tab.id === active,
+        'd-tab-active'
+    ]), onClick: () => onSelect(tab.id) }, tab.label)))));
+export const Toggle = ({ checked, disabled, title, onChange }) => (React.createElement("input", { type: "checkbox", className: "d-toggle d-toggle-secondary d-toggle-sm border border-solid border-primary", checked: checked, disabled: disabled, title: title, onChange: e => onChange(e.target.checked) }));
+export const TagContainer = ({ subEntry, children }) => (React.createElement("div", { className: classList('mt-2 flex flex-wrap items-center gap-y-1', [
+        !!subEntry,
+        "ml-2.5 before:mr-1 before:content-['↳']"
+    ]) }, children));
+const btnVariantClasses = {
+    neutral: '',
+    green: 'd-btn-primary',
+    yellow: 'd-btn-warning',
+    blue: 'd-btn-outline d-btn-primary',
+    red: 'd-btn-error text-white'
+};
+export const Btn = ({ variant, title, disabled, type, active, onClick, children }) => (React.createElement("button", { className: classList('d-btn d-btn-xs ml-1 font-normal normal-case', btnVariantClasses[variant ?? 'neutral'], [!!active, 'd-btn-active']), title: title, disabled: disabled, type: type ?? 'button', onClick: onClick }, children));
+const panelVariantClasses = {
+    grey: 'bg-base-200 text-base-content',
+    red: 'bg-[#e9898b] text-black',
+    blue: 'bg-[#edf6fc] text-black'
+};
+export const Panel = ({ variant, collapsible, children }) => (React.createElement("div", { className: classList('mb-2 max-w-md rounded-md p-2 text-sm [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5', panelVariantClasses[variant ?? 'grey'], [!!collapsible, 'shadow-md']) }, children));
+export const SubHeadline = ({ children }) => (React.createElement("h5", { className: "mb-1 mt-3 text-sm font-bold" }, children));
+export const TextInput = props => (React.createElement("input", { className: "d-input d-input-bordered d-input-xs mx-1 w-44 bg-base-100", type: props.type ?? 'text', ...props }));

package/lib/console/debug.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { GlobalConfig } from './components/globalConfig';
-import { AdSlotConfig } from './components/adSlotConfig';
-import './debug.pcss';
 import { ThemingService } from './util/themingService';
 import { WindowResizeService } from './util/windowResizeService';
 import { createLabelConfigService } from '../ads/labelConfigService';
@@ -16,8 +14,6 @@ if (moliConfig) {
     container.classList.add('moli-console-container');
     const shadowRoot = container.attachShadow({ mode: 'open' });
     const DebugConsole = () => {
-        const [showOverlays, setShowOverlays] = React.useState(false);
-        const slotRoots = React.useRef(new Map());
         React.useEffect(() => {
             setTimeout(() => {
                 const globalConfigComponentRoot = shadowRoot.getElementById('moli-console-global-config');
@@ -26,29 +22,8 @@ if (moliConfig) {
                 themingService.enableSystemThemeListener();
             }, 200);
         }, []);
-        React.useEffect(() => {
-            if (showOverlays) {
-                moliConfig.slots.forEach(slot => {
-                    const slotDomElement = document.getElementById(slot.domId);
-                    if (slotDomElement && labelConfigService.filterSlot(slot)) {
-                        let slotConfigRoot = slotRoots.current.get(slot.domId);
-                        if (!slotConfigRoot) {
-                            slotConfigRoot = createRoot(slotDomElement);
-                            slotRoots.current.set(slot.domId, slotConfigRoot);
-                        }
-                        slotConfigRoot.render(React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot, parentElement: slotDomElement }));
-                    }
-                });
-            }
-            else {
-                slotRoots.current.forEach(root => {
-                    root.unmount();
-                });
-                slotRoots.current.clear();
-            }
-        }, [showOverlays]);
-        return (React.createElement(React.Fragment, null,
-            React.createElement(GlobalConfig, { config: moliConfig, runtimeConfig: window.moli.getRuntimeConfig(), modules: window.moli.getConfig()?.modules || {}, labelConfigService: labelConfigService, windowResizeService: new WindowResizeService(), themingService: themingService, showOverlays: showOverlays, onShowOverlaysChange: setShowOverlays })));
+        return (React.createElement("div", { className: "font-sans text-base text-foreground antialiased" },
+            React.createElement(GlobalConfig, { config: moliConfig, runtimeConfig: window.moli.getRuntimeConfig(), modules: window.moli.getConfig()?.modules || {}, labelConfigService: labelConfigService, windowResizeService: new WindowResizeService(), themingService: themingService })));
     };
     window.document.body.append(container);
     const root = createRoot(shadowRoot);