@highfivve/ad-tag 5.8.30 β†’ 5.8.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/console/components/adSlotConfig.js +115 -87
  2. package/lib/console/components/consentConfig.js +26 -23
  3. package/lib/console/components/globalConfig.js +342 -356
  4. package/lib/console/components/labelConfigDebug.js +8 -8
  5. package/lib/console/components/moduleConfigs.js +359 -0
  6. package/lib/console/components/sizeConfigDebug.js +14 -14
  7. package/lib/console/components/tag.js +11 -2
  8. package/lib/console/components/ui.js +43 -0
  9. package/lib/console/debug.js +2 -27
  10. package/lib/console/tailwind.config.js +205 -0
  11. package/lib/console/util/themingService.js +15 -8
  12. package/lib/console/validations/sizesConfigValidations.js +1 -1
  13. package/lib/gen/packageJson.js +1 -1
  14. package/lib/util/browserStorageKeys.js +1 -0
  15. package/package.json +4 -1
package/lib/console/components/globalConfig.js CHANGED
@@ -1,12 +1,15 @@
1
- import React, { Component, Fragment } from 'react';
1
+ import React, { Component } from 'react';
2
2
  import { AdSlotConfig } from './adSlotConfig';
3
+ import { ModuleConfigs } from './moduleConfigs';
3
4
  import { Tag, TagLabel } from './tag';
5
+ import { Block, Btn, Panel, SubHeadline, Tabs, TagContainer, TextInput, Toggle } from './ui';
4
6
  import { classList } from '../util/stringUtils';
5
7
  import { ConsentConfig } from './consentConfig';
6
8
  import { LabelConfigDebug } from './labelConfigDebug';
7
9
  import { extractPrebidAdSlotConfigs } from '../util/prebid';
8
10
  import { checkAdReloadConfig } from '../validations/adReloadValidations';
9
11
  import { checkSizesConfig } from '../validations/sizesConfigValidations';
12
+ import { SizeConfigService } from '../../ads/sizeConfigService';
10
13
  import { checkBucketConfig, checkSkinConfig } from '../validations/bucketValidations';
11
14
  import { getActiveEnvironmentOverride, resetEnvironmentOverrides, setEnvironmentOverrideInStorage } from '../../util/environmentOverride';
12
15
  import { getDebugDelayFromLocalStorage, setDebugDelayToLocalStorage } from 'ad-tag/util/debugDelay';
@@ -22,12 +25,324 @@ const debugSidebarSelector = 'moli-debug-sidebar';
22
25
  export class GlobalConfig extends Component {
23
26
  constructor(props) {
24
27
  super(props);
28
+ this.renderThemeDropdown = () => {
29
+ const { themeConfig } = this.state;
30
+ const options = [
31
+ { id: 'system', label: 'πŸ–₯️ system' },
32
+ { id: 'light', label: '🌞 light' },
33
+ { id: 'dark', label: 'πŸŒ” dark' }
34
+ ];
35
+ const activeOption = options.find(option => option.id === themeConfig) ?? options[0];
36
+ return (React.createElement("div", { className: "d-dropdown d-dropdown-end ml-auto" },
37
+ React.createElement("button", { tabIndex: 0, className: "d-btn d-btn-ghost d-btn-sm font-normal normal-case", title: "Appearance" },
38
+ activeOption.label,
39
+ " \u25BE"),
40
+ React.createElement("ul", { tabIndex: 0, className: "d-dropdown-content d-menu d-menu-sm z-20 w-32 rounded-md bg-base-200 p-1 shadow" }, options.map(option => (React.createElement("li", { key: option.id },
41
+ React.createElement("button", { className: classList('border-0 bg-transparent text-left', [
42
+ option.id === themeConfig,
43
+ 'd-active'
44
+ ]), onClick: e => {
45
+ this.setThemeConfig(option.id);
46
+ e.currentTarget.blur();
47
+ } }, option.label)))))));
48
+ };
49
+ this.renderOverview = (config) => {
50
+ const { runtimeConfig, labelConfigService } = this.props;
51
+ const configLabel = window.moli.configLabel ?? 'not available';
52
+ const currentConfigVersion = window.moli.getConfig()?.version ?? 'not available';
53
+ const isVersionOverridden = resolveOverrides(window, QueryParameters.moliVersion, BrowserStorageKeys.moliVersion).length >
54
+ 0;
55
+ const isEnvironmentOverridden = !!getActiveEnvironmentOverride(window);
56
+ const isTestMode = runtimeConfig.environment === 'test';
57
+ const requestedSlots = config.slots.filter(this.isSlotRendered);
58
+ return (React.createElement(React.Fragment, null,
59
+ React.createElement(Block, { title: "Ad Tag", color: "moli" },
60
+ React.createElement(TagContainer, null,
61
+ React.createElement(TagLabel, null, "Ad tag version"),
62
+ React.createElement(Tag, { variant: "secondary" }, window.moli.version)),
63
+ React.createElement(TagContainer, null,
64
+ React.createElement(TagLabel, null, "Config version"),
65
+ React.createElement(Tag, { variant: isVersionOverridden ? 'yellow' : 'secondary' }, currentConfigVersion),
66
+ React.createElement(TextInput, { value: this.state.configVersion, placeholder: currentConfigVersion, onChange: e => {
67
+ this.setState({ configVersion: e.currentTarget.value });
68
+ } }),
69
+ React.createElement(Btn, { onClick: () => this.overrideConfigVersion(this.state.configVersion), title: "Reload" }, "load"),
70
+ React.createElement(Btn, { variant: "green", onClick: this.clearConfigVersionOverride, title: "Reset" }, "reset")),
71
+ React.createElement(TagContainer, null,
72
+ React.createElement(TagLabel, null, "Config label"),
73
+ React.createElement(Tag, { variant: "secondary" }, configLabel)),
74
+ React.createElement(TagContainer, null,
75
+ React.createElement(TagLabel, null, "Test mode"),
76
+ React.createElement(Toggle, { checked: isTestMode, title: isTestMode ? 'Switch back to production mode' : 'Override environment to test', onChange: checked => checked ? this.overrideEnvironmentToTest() : this.resetEnvironmentOverrides() }),
77
+ isTestMode && !isEnvironmentOverridden && (React.createElement(Tag, { variant: "yellow" }, "test environment set in config")))),
78
+ React.createElement(Block, { title: "Targeting", color: "targeting" },
79
+ config.targeting && (React.createElement("div", null,
80
+ React.createElement(SubHeadline, null, "Key/value pairs"),
81
+ this.keyValues({
82
+ ...config.targeting.keyValues,
83
+ ...runtimeConfig.keyValues
84
+ }),
85
+ React.createElement(SubHeadline, null, "Labels from publisher"),
86
+ this.labels([...runtimeConfig.labels, ...(config.targeting?.labels ?? [])]),
87
+ React.createElement(SubHeadline, null, "Labels from label size config"),
88
+ this.labels(labelConfigService
89
+ .getSupportedLabels()
90
+ .filter(l1 => !(config.targeting.labels || []).find(l2 => l2 === l1))))),
91
+ !config.targeting && React.createElement("span", null, "No targeting config present.")),
92
+ React.createElement(Block, { title: React.createElement(React.Fragment, null,
93
+ "Requested Ad Slots ",
94
+ React.createElement(Tag, { variant: "grey" }, requestedSlots.length)), color: "slots" },
95
+ requestedSlots.length === 0 && React.createElement("span", null, "No ad slots have been requested."),
96
+ requestedSlots.length > 0 && (React.createElement("ul", { className: "m-0 flex list-none flex-col rounded-md bg-base-100 p-0 shadow-md" }, requestedSlots.map((slot, index) => (React.createElement("li", { key: `${slot.domId}-${index}`, className: classList('grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4 p-3', [index > 0, 'border-0 border-t border-solid border-base-200']) },
97
+ React.createElement("div", { className: "text-xl" }, "\u2728"),
98
+ React.createElement("div", null,
99
+ React.createElement("div", { className: "break-all font-medium" }, slot.domId),
100
+ React.createElement("div", { className: "text-xs font-semibold uppercase opacity-60" }, this.requestedSizesLabel(slot))),
101
+ React.createElement("button", { className: "d-btn d-btn-ghost d-btn-sm font-normal normal-case", title: "Open in Ad Setup", onClick: () => this.openSlotInAdSetup(slot.domId) }, "details")))))))));
102
+ };
103
+ this.renderAdSetup = (config) => {
104
+ const { modules, labelConfigService } = this.props;
105
+ const { showOnlyRenderedSlots, selectedSlotDomId } = this.state;
106
+ return (React.createElement(React.Fragment, null,
107
+ React.createElement(Block, { title: "Ad Slots", color: "slots" },
108
+ React.createElement(Panel, { variant: "grey" },
109
+ "Slot sizes are annotated to show the origin of their validation state:",
110
+ React.createElement("ul", null,
111
+ React.createElement("li", null,
112
+ React.createElement("strong", null, "\u24C8"),
113
+ " means that the validation originates from the",
114
+ ' ',
115
+ React.createElement("strong", null, "slot's own sizeConfig"),
116
+ ","),
117
+ React.createElement("li", null,
118
+ React.createElement("strong", null, "\u24BC"),
119
+ " indicates that the validation was done using the",
120
+ ' ',
121
+ React.createElement("strong", null, "global sizeConfig"),
122
+ "."))),
123
+ React.createElement(Panel, { variant: "grey" },
124
+ React.createElement("label", { className: "flex select-none items-center gap-2" },
125
+ React.createElement("input", { className: "d-checkbox d-checkbox-primary d-checkbox-xs border border-solid border-primary", type: "checkbox", checked: showOnlyRenderedSlots, onChange: e => this.setState({
126
+ showOnlyRenderedSlots: e.target.checked
127
+ }) }),
128
+ "Show only rendered slots")),
129
+ config.slots.map((slot, index) => this.isSlotRendered(slot) || !showOnlyRenderedSlots ? (React.createElement("div", { key: index, ref: el => {
130
+ if (el && selectedSlotDomId === slot.domId) {
131
+ el.scrollIntoView({ block: 'start' });
132
+ this.setState({ selectedSlotDomId: undefined });
133
+ }
134
+ } },
135
+ React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot, initiallyExpanded: selectedSlotDomId === slot.domId }))) : null)),
136
+ React.createElement(Block, { title: "Label Size Config", color: "sizeConfig" },
137
+ config.labelSizeConfig && config.labelSizeConfig.length > 0 && (React.createElement(LabelConfigDebug, { labelSizeConfig: config.labelSizeConfig })),
138
+ (!config.labelSizeConfig || config.labelSizeConfig.length === 0) && (React.createElement("span", null, "No size config present."))),
139
+ React.createElement(Block, { title: "Modules", color: "modules" }, modules && Object.keys(modules).length > 0 ? (React.createElement(ModuleConfigs, { modules: modules })) : (React.createElement("span", null, "No modules configured."))),
140
+ config.prebid && (React.createElement(Block, { title: "Prebid", color: "prebid" },
141
+ React.createElement(TagContainer, null,
142
+ React.createElement(TagLabel, null, "Version"),
143
+ window.pbjs.version ? (React.createElement(Tag, null, window.pbjs.version.toString())) : (React.createElement(Tag, { variant: "red" }, "Prebid not found"))),
144
+ React.createElement(TagContainer, null,
145
+ React.createElement(TagLabel, null, "Prebid debug"),
146
+ React.createElement(Tag, { variant: config.prebid.config.debug ? 'yellow' : undefined }, config.prebid.config.debug ? 'enabled' : 'disabled')),
147
+ config.prebid.config.enableSendAllBids !== undefined && (React.createElement(TagContainer, null,
148
+ React.createElement(TagLabel, null, "sendAllBids enabled"),
149
+ React.createElement(Tag, null, config.prebid.config.enableSendAllBids.toString()))),
150
+ config.prebid.config.bidderTimeout && (React.createElement(TagContainer, null,
151
+ React.createElement(TagLabel, null, "Bidder timeout"),
152
+ React.createElement(Tag, null, `${config.prebid.config.bidderTimeout.toString()}ms`))),
153
+ config.prebid.config.consentManagement && (React.createElement("div", null,
154
+ React.createElement(SubHeadline, null, "Consent management"),
155
+ React.createElement(TagContainer, null,
156
+ React.createElement(TagLabel, null, "allowAuctionWithoutConsent"),
157
+ React.createElement(Tag, null, (!!config.prebid.config.consentManagement.gdpr?.allowAuctionWithoutConsent ??
158
+ 'true').toString())),
159
+ config.prebid.config.consentManagement.gdpr?.cmpApi && (React.createElement(TagContainer, null,
160
+ React.createElement(TagLabel, null, "CMP API"),
161
+ React.createElement(Tag, null, config.prebid.config.consentManagement.gdpr?.cmpApi ?? 'iab'))),
162
+ React.createElement(TagContainer, null,
163
+ React.createElement(TagLabel, null, "CMP timeout"),
164
+ React.createElement(Tag, null, `${config.prebid.config.consentManagement.gdpr?.timeout ?? 10000}ms`)))),
165
+ config.prebid.config.userSync && (React.createElement("div", null,
166
+ React.createElement(SubHeadline, null, "User sync"),
167
+ React.createElement(TagContainer, null,
168
+ React.createElement(TagLabel, null, "Sync enabled"),
169
+ React.createElement(Tag, null, config.prebid.config.userSync.syncEnabled === undefined
170
+ ? `${window.pbjs
171
+ .getConfig()
172
+ .userSync?.syncEnabled?.toString()} (default from prebid config - no value in moli config)`
173
+ : config.prebid.config.userSync.syncEnabled.toString())),
174
+ config.prebid.config.userSync.syncDelay !== undefined && (React.createElement(TagContainer, null,
175
+ React.createElement(TagLabel, null, "Sync delay"),
176
+ React.createElement(Tag, null, `${config.prebid.config.userSync.syncDelay}ms`))),
177
+ config.prebid.config.userSync.syncsPerBidder !== undefined && (React.createElement(TagContainer, null,
178
+ React.createElement(TagLabel, null, "Syncs per bidder"),
179
+ React.createElement(Tag, null, config.prebid.config.userSync.syncsPerBidder.toString()))),
180
+ React.createElement(TagContainer, null,
181
+ React.createElement(TagLabel, null, "User sync override enabled"),
182
+ React.createElement(Tag, null, (!!config.prebid.config.userSync.enableOverride).toString())),
183
+ config.prebid.config.userSync.filterSettings && (React.createElement("div", null,
184
+ React.createElement("h6", { className: "mt-2 text-xs font-bold" }, "Filter Settings"),
185
+ config.prebid.config.userSync.filterSettings.all &&
186
+ this.filterSetting('All', config.prebid.config.userSync.filterSettings.all),
187
+ config.prebid.config.userSync.filterSettings.iframe &&
188
+ this.filterSetting('iFrame', config.prebid.config.userSync.filterSettings.iframe),
189
+ config.prebid.config.userSync.filterSettings.image &&
190
+ this.filterSetting('Image', config.prebid.config.userSync.filterSettings.image))))),
191
+ React.createElement(SubHeadline, null, "Currency"),
192
+ React.createElement(TagContainer, null,
193
+ React.createElement(TagLabel, null, "Ad server currency"),
194
+ React.createElement(Tag, null, config.prebid.config.currency?.adServerCurrency ?? 'EUR (default)')),
195
+ React.createElement(TagContainer, null,
196
+ React.createElement(TagLabel, null, "Granularity multiplier"),
197
+ React.createElement(Tag, null, config.prebid.config.currency?.granularityMultiplier.toString() ?? 'not set')),
198
+ React.createElement(TagContainer, null,
199
+ React.createElement(TagLabel, null, "Default Rates, USD \u2192 EUR"),
200
+ React.createElement(Tag, null, config.prebid.config.currency?.defaultRates.USD.EUR?.toString() ?? 'not set')))),
201
+ config.a9 && (React.createElement(Block, { title: "A9", color: "a9" },
202
+ React.createElement(TagContainer, null,
203
+ React.createElement(TagLabel, null, "PubID"),
204
+ React.createElement(Tag, { variant: config.a9.pubID ? 'blue' : 'red' }, config.a9.pubID)),
205
+ React.createElement(TagContainer, null,
206
+ React.createElement(TagLabel, null, "Timeout"),
207
+ React.createElement(Tag, { variant: config.a9.timeout ? 'blue' : 'red' },
208
+ config.a9.timeout.toFixed(0),
209
+ "ms")),
210
+ React.createElement(TagContainer, null,
211
+ React.createElement(TagLabel, null, "CMP timeout"),
212
+ React.createElement(Tag, { variant: config.a9.cmpTimeout ? 'blue' : 'red' },
213
+ config.a9.cmpTimeout.toFixed(0),
214
+ "ms"))))));
215
+ };
216
+ this.renderDebugging = (config) => {
217
+ const { runtimeConfig } = this.props;
218
+ const { adstxtEntry, adstxtDomain, adDensity } = this.state;
219
+ const interstitialSlot = window.moli
220
+ .getConfig()
221
+ ?.slots.find(slot => slot.position === 'interstitial');
222
+ const isEnvironmentOverridden = !!getActiveEnvironmentOverride(window);
223
+ const interstitialTestKey = 'test-interstitial';
224
+ const isInterstitialTestEnabled = !!getBrowserStorageValue(interstitialTestKey, localStorage);
225
+ const debugDelay = getDebugDelayFromLocalStorage(window);
226
+ return (React.createElement(React.Fragment, null,
227
+ React.createElement(Block, { title: "Tools", color: "moli" },
228
+ interstitialSlot && (React.createElement(TagContainer, null,
229
+ React.createElement(TagLabel, null, "Interstitital Test Mode"),
230
+ isInterstitialTestEnabled ? (React.createElement(Btn, { variant: "green", onClick: () => {
231
+ removeBrowserStorageValue(interstitialTestKey, localStorage);
232
+ this.refreshInterstitial(interstitialSlot);
233
+ } }, "\u25C0 Reset interstitial test")) : (React.createElement(Btn, { variant: "yellow", onClick: () => {
234
+ setBrowserStorageValue(interstitialTestKey, 'true', localStorage);
235
+ this.refreshInterstitial(interstitialSlot);
236
+ }, disabled: !isEnvironmentOverridden }, "\u25B6 Test interstitial")),
237
+ !isEnvironmentOverridden && (React.createElement("p", { className: "mt-2 max-w-md" }, "\u2757\uFE0FPlease activate the test mode (Overview tab) before testing the interstitial.")))),
238
+ React.createElement(TagContainer, null,
239
+ React.createElement(TagLabel, null, "Delay loading ads (only in test environment)"),
240
+ React.createElement(TextInput, { type: "number", placeholder: "in milliseconds", value: debugDelay, list: "debug-delay-suggestions", disabled: runtimeConfig.environment !== 'test', onChange: e => setDebugDelayToLocalStorage(window, e.currentTarget.valueAsNumber) }),
241
+ React.createElement("datalist", { id: "debug-delay-suggestions" },
242
+ React.createElement("option", { value: 500 }),
243
+ React.createElement("option", { value: 1000 }),
244
+ React.createElement("option", { value: 2000 }),
245
+ React.createElement("option", { value: 3000 }))),
246
+ React.createElement(TagContainer, null,
247
+ React.createElement(Btn, { variant: "blue", onClick: () => {
248
+ config.slots.forEach(removeTestSlotSizeFromLocalStorage);
249
+ window.location.reload();
250
+ } }, "\u25B6 Reset all test slot sizes"))),
251
+ React.createElement(Block, { title: "Consent", color: "consent" },
252
+ React.createElement(ConsentConfig, null)),
253
+ React.createElement(Block, { title: "Supply Chain", color: "supplyChain" },
254
+ React.createElement(TagContainer, null,
255
+ React.createElement(TagLabel, null, "Seller ID (ads.txt)"),
256
+ React.createElement(Tag, { variant: adstxtEntry[1] === config?.schain.supplyChainStartNode.sid ? 'green' : 'red' }, adstxtEntry[1])),
257
+ React.createElement(TagContainer, null,
258
+ React.createElement(TagLabel, null, "Status"),
259
+ React.createElement(Tag, { variant: adstxtEntry[2] ? 'blue' : 'red' }, adstxtEntry[2])),
260
+ React.createElement("p", { className: "mt-2 max-w-md" }, config?.schain.supplyChainStartNode.sid === adstxtEntry[1]
261
+ ? `βœ… Seller ids in ad tag config and ads.txt of domain ${adstxtDomain} are matching!`
262
+ : `❗️Seller ids in ad tag config (${config?.schain.supplyChainStartNode.sid}) and ads.txt of current domain (${adstxtDomain}, ${adstxtEntry[1]}) are different!`),
263
+ this.state.adstxtError !== '' && (React.createElement(Panel, { variant: "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.`)),
264
+ React.createElement("form", { className: "mb-2 mt-2 flex max-w-md flex-col gap-2 rounded-md bg-[#edf6fc] p-2 text-black", onSubmit: async (event) => {
265
+ event.preventDefault();
266
+ const newAdsTxtDomain = event.target[0].value;
267
+ this.setState({
268
+ adstxtDomain: newAdsTxtDomain,
269
+ adstxtEntry: (await this.findPublisherEntryInAdsTxt(newAdsTxtDomain)) ?? []
270
+ });
271
+ } },
272
+ React.createElement("label", { htmlFor: "newDomain" }, "Use different ads.txt domain for seller id comparison:"),
273
+ React.createElement("div", null,
274
+ React.createElement(TextInput, { placeholder: "Enter new domain", name: "newDomain", id: "newDomain" }),
275
+ React.createElement(Btn, { type: "submit" }, "Go!")))),
276
+ React.createElement(Block, { title: "Ad Density", color: "adDensity" },
277
+ React.createElement("form", { className: "mb-2 mt-2 flex max-w-md flex-col gap-2 rounded-md bg-[#edf6fc] p-2 text-black", onSubmit: async (event) => {
278
+ event.preventDefault();
279
+ const contentSelector = event.target[0].value;
280
+ const { totalAdDensity, adAreaPerSlot } = calculateAdDensity(contentSelector, undefined);
281
+ const percentagePerSlot = adAreaPerSlot.map(adArea => {
282
+ if (!adArea || !adDensity.totalAdDensity) {
283
+ return {
284
+ adSlotId: adArea?.adSlot ? adArea.adSlot : 'unknown',
285
+ percentage: '0.00'
286
+ };
287
+ }
288
+ return {
289
+ adSlotId: adArea.adSlot,
290
+ percentage: ((adArea.adArea / adDensity.totalAdDensity) * 100).toFixed(2)
291
+ };
292
+ });
293
+ this.setState({
294
+ adDensity: { totalAdDensity, percentagePerSlot }
295
+ });
296
+ } },
297
+ React.createElement("label", { htmlFor: "adDensitySelector" }, "Calculate ad density of the content element"),
298
+ React.createElement("div", null,
299
+ React.createElement(TextInput, { placeholder: "Enter CSS selector", name: "adDensitySelector", id: "adDensitySelector" }),
300
+ React.createElement(Btn, { type: "submit" }, "Go!"))),
301
+ React.createElement(TagContainer, null,
302
+ React.createElement(TagLabel, null, "Ad Density"),
303
+ React.createElement(Tag, { variant: 'green' }, adDensity.totalAdDensity)),
304
+ adDensity.percentagePerSlot.length > 0 && (React.createElement(React.Fragment, null,
305
+ React.createElement(SubHeadline, null, "Percentage of ad slot area on total ad area"),
306
+ adDensity.percentagePerSlot.map(percentage => {
307
+ return (React.createElement(TagContainer, { key: percentage.adSlotId },
308
+ React.createElement(TagLabel, null, extractPositionFromPath(percentage.adSlotId)),
309
+ React.createElement(Tag, { variant: 'green' },
310
+ percentage.percentage,
311
+ "%")));
312
+ })))),
313
+ React.createElement(Block, { title: React.createElement(React.Fragment, null,
314
+ "Validation ",
315
+ this.validationCountTag()), color: "validation" },
316
+ React.createElement("div", { className: "flex max-w-md flex-col gap-1" },
317
+ this.state.messages.length === 0 && (React.createElement("div", { className: "d-alert d-alert-success rounded-md px-2 py-1 text-sm" },
318
+ React.createElement("span", null, "\u2714 No configuration issues found"))),
319
+ this.state.messages.map((message, index) => (React.createElement("div", { key: index, className: classList('d-alert rounded-md px-2 py-1 text-sm', [message.kind === 'error', 'd-alert-error'], [message.kind === 'warning', 'd-alert-warning'], [message.kind === 'optimization', 'd-alert-info']) },
320
+ React.createElement("span", null, message.text))))))));
321
+ };
25
322
  this.listener = () => {
26
323
  this.setState({ browserResized: true });
27
324
  };
28
325
  this.componentWillUnmount = () => {
29
326
  this.props.windowResizeService.unregister(this);
30
327
  };
328
+ this.validationCountTag = () => (React.createElement(Tag, { variant: this.state.messages.some(m => m.kind === 'error')
329
+ ? 'red'
330
+ : this.state.messages.length > 0
331
+ ? 'yellow'
332
+ : 'green' }, this.state.messages.length));
333
+ this.openSlotInAdSetup = (domId) => {
334
+ this.setState({ activeTab: 'adSetup', selectedSlotDomId: domId });
335
+ };
336
+ this.requestedSizesLabel = (slot) => {
337
+ const supportedSizes = new SizeConfigService(slot.sizeConfig, this.props.labelConfigService.getSupportedLabels(), window).filterSupportedSizes(slot.sizes);
338
+ if (supportedSizes.length === 0) {
339
+ return 'no sizes requested';
340
+ }
341
+ const formatted = supportedSizes
342
+ .slice(0, 3)
343
+ .map(size => (size === 'fluid' ? 'fluid' : `${size[0]}x${size[1]}`));
344
+ return formatted.join(' Β· ') + (supportedSizes.length > 3 ? ' Β· …' : '');
345
+ };
31
346
  this.resetEnvironmentOverrides = () => {
32
347
  resetEnvironmentOverrides(window);
33
348
  };
@@ -42,29 +357,10 @@ export class GlobalConfig extends Component {
42
357
  this.clearConfigVersionOverride = () => {
43
358
  window.localStorage.removeItem(BrowserStorageKeys.moliVersion);
44
359
  };
45
- this.unwrapConfig = (moduleConfig, subEntry = false) => {
46
- return (React.createElement(Fragment, null, Object.keys(moduleConfig).map((key, index) => {
47
- const configValue = moduleConfig[key];
48
- const configValueType = typeof configValue === 'object'
49
- ? Array.isArray(configValue)
50
- ? 'array'
51
- : 'object'
52
- : 'other';
53
- return (React.createElement("div", { key: index, className: classList('MoliDebug-tagContainer', [
54
- subEntry,
55
- 'MoliDebug-tagContainer--subEntry'
56
- ]) },
57
- React.createElement(TagLabel, null, key),
58
- configValueType === 'array' &&
59
- (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'))))),
60
- configValueType === 'object' && this.unwrapConfig(configValue, true),
61
- configValueType === 'other' && configValue !== undefined && (React.createElement(Tag, { variant: "green" }, configValue.toString()))));
62
- })));
63
- };
64
- this.setTheme = (theme) => this.setState({ theme }, () => this.props.themingService.applyTheme(theme));
360
+ this.setThemeConfig = (themeConfig) => this.setState({ themeConfig }, () => this.props.themingService.setThemeConfig(themeConfig));
65
361
  this.keyValues = (keyValues) => {
66
362
  const properties = Object.keys(keyValues);
67
- return properties.length > 0 ? (React.createElement("table", { className: "MoliDebug-keyValueTable" },
363
+ return properties.length > 0 ? (React.createElement("table", { className: "d-table d-table-xs w-auto text-left" },
68
364
  React.createElement("thead", null,
69
365
  React.createElement("tr", null,
70
366
  React.createElement("th", null, "Key"),
@@ -79,7 +375,7 @@ export class GlobalConfig extends Component {
79
375
  })))) : (React.createElement("span", null, "No key/values config present."));
80
376
  };
81
377
  this.labels = (labels) => {
82
- return (React.createElement("div", { className: "MoliDebug-tagContainer" },
378
+ return (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
83
379
  labels &&
84
380
  labels.map((label, index) => (React.createElement(Tag, { key: index, variant: "blue", spacing: "medium" }, label))),
85
381
  (!labels || labels.length === 0) && React.createElement("span", null, "No labels present.")));
@@ -87,12 +383,12 @@ export class GlobalConfig extends Component {
87
383
  this.filterSetting = (name, filterSetting) => {
88
384
  return (React.createElement("div", null,
89
385
  React.createElement("strong", null, name),
90
- React.createElement("div", { className: "MoliDebug-tagContainer" },
386
+ React.createElement(TagContainer, null,
91
387
  React.createElement(TagLabel, null, "Bidders"),
92
388
  filterSetting.bidders === '*'
93
389
  ? this.standardTagFromString('all')
94
390
  : filterSetting.bidders.map(this.standardTagFromString)),
95
- React.createElement("div", { className: "MoliDebug-tagContainer" },
391
+ React.createElement(TagContainer, null,
96
392
  React.createElement(TagLabel, null, "Include/exclude"),
97
393
  this.standardTagFromString(filterSetting.filter))));
98
394
  };
@@ -102,19 +398,6 @@ export class GlobalConfig extends Component {
102
398
  this.toggleSidebar = () => {
103
399
  this.setState({ sidebarHidden: !this.state.sidebarHidden });
104
400
  };
105
- this.collapseToggle = (section) => {
106
- const toggleValue = (section) => {
107
- const oldVal = this.state.expandSection[section];
108
- this.setState({ expandSection: { ...this.state.expandSection, [section]: !oldVal } });
109
- };
110
- return (React.createElement("button", { className: "MoliDebug-adSlot-button", title: `${this.state.expandSection[section] ? 'collapse' : 'expand'} ${section}`, onClick: () => toggleValue(section) }, this.state.expandSection[section] ? 'βŠ–' : 'βŠ•'));
111
- };
112
- this.iconForMessageKind = (kind) => {
113
- return (React.createElement("span", { className: "MoliDebug-configMessage-icon" },
114
- kind === 'error' && React.createElement("span", null, "\u2757"),
115
- kind === 'warning' && React.createElement("span", null, "\u26A0"),
116
- kind === 'empty' && React.createElement("span", null, "\u2714")));
117
- };
118
401
  this.reportMissingConfig = (messages) => {
119
402
  messages.push({
120
403
  kind: 'error',
@@ -210,23 +493,11 @@ export class GlobalConfig extends Component {
210
493
  this.isSlotRendered = (slot) => !!document.getElementById(slot.domId) && this.props.labelConfigService.filterSlot(slot);
211
494
  this.state = {
212
495
  sidebarHidden: false,
213
- expandSection: {
214
- slots: true,
215
- moli: true,
216
- modules: false,
217
- targeting: false,
218
- prebid: false,
219
- a9: false,
220
- labelSizeConfig: false,
221
- consent: false,
222
- yieldOptimization: false,
223
- supplyChain: false,
224
- adDensity: false
225
- },
496
+ activeTab: 'overview',
226
497
  messages: [],
227
498
  browserResized: false,
228
499
  showOnlyRenderedSlots: false,
229
- theme: props.themingService.currentTheme(),
500
+ themeConfig: props.themingService.currentThemeConfig(),
230
501
  adstxtEntry: [],
231
502
  adstxtDomain: '',
232
503
  adstxtError: '',
@@ -324,312 +595,27 @@ export class GlobalConfig extends Component {
324
595
  });
325
596
  }
326
597
  render() {
327
- const { config, runtimeConfig, modules, labelConfigService } = this.props;
328
- const configLabel = window.moli.configLabel ?? 'not available';
329
- const currentConfigVersion = window.moli.getConfig()?.version ?? 'not available';
330
- const isVersionOverridden = resolveOverrides(window, QueryParameters.moliVersion, BrowserStorageKeys.moliVersion).length >
331
- 0;
332
- const { sidebarHidden, showOnlyRenderedSlots, expandSection, theme, adstxtEntry, adstxtDomain, adDensity } = this.state;
333
- const interstitialSlot = window.moli
334
- .getConfig()
335
- ?.slots.find(slot => slot.position === 'interstitial');
336
- const classes = classList('MoliDebug-sidebar', [sidebarHidden, 'is-hidden']);
337
- const showHideMessage = `${sidebarHidden ? 'Show' : 'Hide'} moli global config panel`;
338
- const isEnvironmentOverridden = !!getActiveEnvironmentOverride(window);
339
- const interstitialTestKey = 'test-interstitial';
340
- const isInterstitialTestEnabled = !!getBrowserStorageValue(interstitialTestKey, localStorage);
341
- const debugDelay = getDebugDelayFromLocalStorage(window);
342
- const isDarkTheme = theme === 'dark';
343
- const switchToDarkTheme = () => this.setTheme('dark');
344
- const switchToLightTheme = () => this.setTheme('light');
598
+ const { config } = this.props;
599
+ const { sidebarHidden, activeTab } = this.state;
600
+ const classes = classList('fixed right-0 top-0 z-[99999999] box-border block max-h-screen w-full max-w-full overflow-y-auto bg-base-100 pb-4 text-left text-sm text-base-content shadow-[-3px_0_5px_0_rgba(0,0,0,0.2)] md:w-[700px]', [sidebarHidden, 'hidden']);
345
601
  return (React.createElement("div", { id: "moli-console-global-config" },
346
602
  React.createElement("style", null, styles),
347
- React.createElement("button", { className: "MoliDebug-sidebar-closeHandle", title: showHideMessage, onClick: this.toggleSidebar },
348
- sidebarHidden && React.createElement("span", null, "\u2B05 "),
349
- !sidebarHidden && React.createElement("span", null, "\u00D7 "),
350
- showHideMessage),
603
+ sidebarHidden && (React.createElement("button", { className: "d-btn d-btn-warning d-btn-sm fixed left-0 top-0 z-[100000000] w-screen justify-start rounded-none font-normal normal-case md:left-auto md:right-0 md:w-auto md:rounded-bl-md", title: "Show moli global config panel", onClick: this.toggleSidebar },
604
+ React.createElement("span", null, "\u2B05 "),
605
+ "Show moli global config panel")),
351
606
  config && (React.createElement("div", { className: classes, "data-ref": debugSidebarSelector },
352
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--moli" },
353
- React.createElement("div", { className: "MoliDebug-tagContainer" },
354
- React.createElement("div", { className: "MoliDebug-tagContainer" },
355
- React.createElement(TagLabel, null, "Config version"),
356
- React.createElement(Tag, { variant: isVersionOverridden ? 'yellow' : 'blue' }, currentConfigVersion),
357
- React.createElement("input", { type: "text", value: this.state.configVersion, placeholder: currentConfigVersion, onChange: e => {
358
- this.setState({ configVersion: e.currentTarget.value });
359
- } }),
360
- React.createElement("button", { className: "MoliDebug-button", onClick: () => this.overrideConfigVersion(this.state.configVersion), title: "Reload" }, "load"),
361
- React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: this.clearConfigVersionOverride, title: "Reset" }, "reset")),
362
- React.createElement("div", { className: "MoliDebug-tagContainer" },
363
- React.createElement(TagLabel, null, "Config label"),
364
- React.createElement(Tag, null, configLabel)),
365
- React.createElement("br", null),
366
- React.createElement(TagLabel, null, "Appearance"),
367
- isDarkTheme && (React.createElement("button", { className: "MoliDebug-button", onClick: switchToLightTheme, title: "Switch to light theme" }, "\uD83C\uDF14 dark")),
368
- !isDarkTheme && (React.createElement("button", { className: "MoliDebug-button", onClick: switchToDarkTheme, title: "Switch to dark theme" }, "\uD83C\uDF1E light"))),
369
- React.createElement("h4", null,
370
- this.collapseToggle('moli'),
371
- "Moli ",
372
- React.createElement("span", null, window.moli.version)),
373
- expandSection.moli && (React.createElement("div", null,
374
- React.createElement("div", { className: "MoliDebug-tagContainer" },
375
- React.createElement(TagLabel, null, "Overall Mode"),
376
- runtimeConfig.environment === 'test' ? (React.createElement(Tag, { variant: "yellow" }, "Test")) : (React.createElement(Tag, { variant: "green" }, "Production")),
377
- 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")),
378
- React.createElement("button", { className: "MoliDebug-button MoliDebug-button--blue", onClick: () => this.props.onShowOverlaysChange(!this.props.showOverlays) }, this.props.showOverlays ? 'β—€ Hide overlays' : 'β–Ά Show overlays')),
379
- interstitialSlot && (React.createElement("div", { className: "MoliDebug-tagContainer" },
380
- React.createElement(TagLabel, null, "Interstitital Test Mode"),
381
- isInterstitialTestEnabled ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: () => {
382
- removeBrowserStorageValue(interstitialTestKey, localStorage);
383
- this.refreshInterstitial(interstitialSlot);
384
- } }, "\u25C0 Reset interstitial test")) : (React.createElement("button", { className: `MoliDebug-button MoliDebug-button--yellow MoliDebug-button--greyText ${!isEnvironmentOverridden ? 'MoliDebug-button--disabled' : ''}`, onClick: () => {
385
- setBrowserStorageValue(interstitialTestKey, 'true', localStorage);
386
- this.refreshInterstitial(interstitialSlot);
387
- }, disabled: !isEnvironmentOverridden }, "\u25B6 Test interstitial")),
388
- !isEnvironmentOverridden && (React.createElement("p", { className: "MoliDebug-info" }, "\u2757\uFE0FPlease activate the overall test mode before testing the interstitial.")))),
389
- React.createElement("div", { className: "MoliDebug-tagContainer" },
390
- React.createElement(TagLabel, null, "Delay loading ads (only in test environment)"),
391
- 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) }),
392
- React.createElement("datalist", { id: "debug-delay-suggestions" },
393
- React.createElement("option", { value: 500 }),
394
- React.createElement("option", { value: 1000 }),
395
- React.createElement("option", { value: 2000 }),
396
- React.createElement("option", { value: 3000 }))),
397
- React.createElement("div", { className: "MoliDebug-tagContainer" },
398
- React.createElement("button", { className: "MoliDebug-button MoliDebug-button--blue", onClick: () => {
399
- config.slots.forEach(removeTestSlotSizeFromLocalStorage);
400
- window.location.reload();
401
- } }, "\u25B6 Reset all test slot sizes")),
402
- modules && (React.createElement(React.Fragment, null,
403
- React.createElement("h5", null,
404
- this.collapseToggle('modules'),
405
- "Moli Modules"),
406
- expandSection.modules && (React.createElement(React.Fragment, null, Object.entries(modules).map(([module, config], index) => {
407
- const moduleConfig = config;
408
- return (React.createElement("div", { key: index },
409
- React.createElement("div", { className: "MoliDebug-tagContainer MoliDebug-module", "data-module-key": index + 1 },
410
- React.createElement(Tag, { variant: moduleConfig.enabled ? 'green' : 'grey' }, module)),
411
- moduleConfig && (React.createElement(Fragment, null,
412
- React.createElement("h6", null, "Module Config"),
413
- this.unwrapConfig(moduleConfig))),
414
- index !== Object.keys(modules).length - 1 && React.createElement("hr", null)));
415
- })))))))),
416
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--slots" },
417
- React.createElement("h4", null,
418
- this.collapseToggle('slots'),
419
- "Slots"),
420
- expandSection.slots && (React.createElement("div", null,
421
- React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--grey" },
422
- "Slot sizes are annotated to show the origin of their validation state:",
423
- React.createElement("ul", null,
424
- React.createElement("li", null,
425
- React.createElement("strong", null, "\u24C8"),
426
- " means that the validation originates from the",
427
- ' ',
428
- React.createElement("strong", null, "slot's own sizeConfig"),
429
- ","),
430
- React.createElement("li", null,
431
- React.createElement("strong", null, "\u24BC"),
432
- " indicates that the validation was done using the",
433
- ' ',
434
- React.createElement("strong", null, "global sizeConfig"),
435
- "."))),
436
- React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--grey" },
437
- React.createElement("label", { className: "MoliDebug-checkBox" },
438
- React.createElement("input", { type: "checkbox", onChange: e => this.setState({
439
- showOnlyRenderedSlots: e.target.checked
440
- }) }),
441
- "Show only rendered slots")),
442
- config.slots.map((slot, index) => this.isSlotRendered(slot) || !showOnlyRenderedSlots ? (React.createElement("div", { key: index },
443
- React.createElement("strong", null, slot.behaviour.loaded),
444
- " slot with DOM ID",
445
- ' ',
446
- React.createElement("strong", null, slot.domId),
447
- React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot }))) : null)))),
448
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--targeting" },
449
- React.createElement("h4", null,
450
- this.collapseToggle('targeting'),
451
- "Targeting"),
452
- expandSection.targeting && (React.createElement("div", null,
453
- config.targeting && (React.createElement("div", null,
454
- React.createElement("h5", null, "Key/value pairs"),
455
- this.keyValues({
456
- ...config.targeting.keyValues,
457
- ...runtimeConfig.keyValues
458
- }),
459
- React.createElement("h5", null, "Labels from publisher"),
460
- this.labels([...runtimeConfig.labels, ...(config.targeting?.labels ?? [])]),
461
- React.createElement("h5", null, "Labels from label size config"),
462
- this.labels(labelConfigService
463
- .getSupportedLabels()
464
- .filter(l1 => !(config.targeting.labels || []).find(l2 => l2 === l1))))),
465
- !config.targeting && React.createElement("span", null, "No targeting config present.")))),
466
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--sizeConfig" },
467
- React.createElement("h4", null,
468
- this.collapseToggle('labelSizeConfig'),
469
- "Label Size config"),
470
- expandSection.labelSizeConfig && (React.createElement("div", null,
471
- config.labelSizeConfig && config.labelSizeConfig.length > 0 && (React.createElement(LabelConfigDebug, { labelSizeConfig: config.labelSizeConfig })),
472
- (!config.labelSizeConfig || config.labelSizeConfig.length === 0) && (React.createElement("span", null, "No size config present."))))),
473
- config.prebid && (React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--prebid" },
474
- React.createElement("h4", null,
475
- this.collapseToggle('prebid'),
476
- "Prebid"),
477
- expandSection.prebid && (React.createElement("div", null,
478
- React.createElement("div", { className: "MoliDebug-tagContainer" },
479
- React.createElement(TagLabel, null, "Version"),
480
- window.pbjs.version ? (React.createElement(Tag, null, window.pbjs.version.toString())) : (React.createElement(Tag, { variant: "red" }, "Prebid not found"))),
481
- React.createElement("div", { className: "MoliDebug-tagContainer" },
482
- React.createElement(TagLabel, null, "Prebid debug"),
483
- React.createElement(Tag, { variant: config.prebid.config.debug ? 'yellow' : undefined }, config.prebid.config.debug ? 'enabled' : 'disabled')),
484
- config.prebid.config.enableSendAllBids !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
485
- React.createElement(TagLabel, null, "sendAllBids enabled"),
486
- React.createElement(Tag, null, config.prebid.config.enableSendAllBids.toString()))),
487
- config.prebid.config.bidderTimeout && (React.createElement("div", { className: "MoliDebug-tagContainer" },
488
- React.createElement(TagLabel, null, "Bidder timeout"),
489
- React.createElement(Tag, null, `${config.prebid.config.bidderTimeout.toString()}ms`))),
490
- config.prebid.config.consentManagement && (React.createElement("div", null,
491
- React.createElement("h5", null, "Consent management"),
492
- React.createElement("div", { className: "MoliDebug-tagContainer" },
493
- React.createElement(TagLabel, null, "allowAuctionWithoutConsent"),
494
- React.createElement(Tag, null, (!!config.prebid.config.consentManagement.gdpr
495
- ?.allowAuctionWithoutConsent ?? 'true').toString())),
496
- config.prebid.config.consentManagement.gdpr?.cmpApi && (React.createElement("div", { className: "MoliDebug-tagContainer" },
497
- React.createElement(TagLabel, null, "CMP API"),
498
- React.createElement(Tag, null, config.prebid.config.consentManagement.gdpr?.cmpApi ?? 'iab'))),
499
- React.createElement("div", { className: "MoliDebug-tagContainer" },
500
- React.createElement(TagLabel, null, "CMP timeout"),
501
- React.createElement(Tag, null, `${config.prebid.config.consentManagement.gdpr?.timeout ?? 10000}ms`)))),
502
- config.prebid.config.userSync && (React.createElement("div", null,
503
- React.createElement("h5", null, "User sync"),
504
- React.createElement("div", { className: "MoliDebug-tagContainer" },
505
- React.createElement(TagLabel, null, "Sync enabled"),
506
- React.createElement(Tag, null, config.prebid.config.userSync.syncEnabled === undefined
507
- ? `${window.pbjs
508
- .getConfig()
509
- .userSync?.syncEnabled?.toString()} (default from prebid config - no value in moli config)`
510
- : config.prebid.config.userSync.syncEnabled.toString())),
511
- config.prebid.config.userSync.syncDelay !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
512
- React.createElement(TagLabel, null, "Sync delay"),
513
- React.createElement(Tag, null, `${config.prebid.config.userSync.syncDelay}ms`))),
514
- config.prebid.config.userSync.syncsPerBidder !== undefined && (React.createElement("div", { className: "MoliDebug-tagContainer" },
515
- React.createElement(TagLabel, null, "Syncs per bidder"),
516
- React.createElement(Tag, null, config.prebid.config.userSync.syncsPerBidder.toString()))),
517
- React.createElement("div", { className: "MoliDebug-tagContainer" },
518
- React.createElement(TagLabel, null, "User sync override enabled"),
519
- React.createElement(Tag, null, (!!config.prebid.config.userSync.enableOverride).toString())),
520
- config.prebid.config.userSync.filterSettings && (React.createElement("div", null,
521
- React.createElement("h6", null, "Filter Settings"),
522
- config.prebid.config.userSync.filterSettings.all &&
523
- this.filterSetting('All', config.prebid.config.userSync.filterSettings.all),
524
- config.prebid.config.userSync.filterSettings.iframe &&
525
- this.filterSetting('iFrame', config.prebid.config.userSync.filterSettings.iframe),
526
- config.prebid.config.userSync.filterSettings.image &&
527
- this.filterSetting('Image', config.prebid.config.userSync.filterSettings.image))))),
528
- React.createElement("h5", null, "Currency"),
529
- React.createElement("div", { className: "MoliDebug-tagContainer" },
530
- React.createElement(TagLabel, null, "Ad server currency"),
531
- React.createElement(Tag, null, config.prebid.config.currency?.adServerCurrency ?? 'EUR (default)')),
532
- React.createElement("div", { className: "MoliDebug-tagContainer" },
533
- React.createElement(TagLabel, null, "Granularity multiplier"),
534
- React.createElement(Tag, null, config.prebid.config.currency?.granularityMultiplier.toString() ??
535
- 'not set')),
536
- React.createElement("div", { className: "MoliDebug-tagContainer" },
537
- React.createElement(TagLabel, null, "Default Rates, USD \u2192 EUR"),
538
- React.createElement(Tag, null, config.prebid.config.currency?.defaultRates.USD.EUR?.toString() ??
539
- 'not set')))))),
540
- config.a9 && (React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--a9" },
541
- React.createElement("h4", null,
542
- this.collapseToggle('a9'),
543
- "A9"),
544
- expandSection.a9 && (React.createElement("div", null,
545
- React.createElement("div", { className: "MoliDebug-tagContainer" },
546
- React.createElement(TagLabel, null, "PubID"),
547
- React.createElement(Tag, { variant: config.a9.pubID ? 'blue' : 'red' }, config.a9.pubID)),
548
- React.createElement("div", { className: "MoliDebug-tagContainer" },
549
- React.createElement(TagLabel, null, "Timeout"),
550
- React.createElement(Tag, { variant: config.a9.timeout ? 'blue' : 'red' },
551
- config.a9.timeout.toFixed(0),
552
- "ms")),
553
- React.createElement("div", { className: "MoliDebug-tagContainer" },
554
- React.createElement(TagLabel, null, "CMP timeout"),
555
- React.createElement(Tag, { variant: config.a9.cmpTimeout ? 'blue' : 'red' },
556
- config.a9.cmpTimeout.toFixed(0),
557
- "ms")))))),
558
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--consent" },
559
- React.createElement("h4", null,
560
- this.collapseToggle('consent'),
561
- "Consent"),
562
- expandSection.consent && (React.createElement("div", null,
563
- React.createElement(ConsentConfig, null)))),
564
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--supplyChain" },
565
- React.createElement("h4", null,
566
- this.collapseToggle('supplyChain'),
567
- "Supply Chain"),
568
- expandSection.supplyChain && (React.createElement(React.Fragment, null,
569
- React.createElement("div", { className: "MoliDebug-tagContainer" },
570
- React.createElement(TagLabel, null, "Seller ID (ads.txt)"),
571
- React.createElement(Tag, { variant: adstxtEntry[1] === config?.schain.supplyChainStartNode.sid ? 'green' : 'red' }, adstxtEntry[1])),
572
- React.createElement("div", { className: "MoliDebug-tagContainer" },
573
- React.createElement(TagLabel, null, "Status"),
574
- React.createElement(Tag, { variant: adstxtEntry[2] ? 'blue' : 'red' }, adstxtEntry[2])),
575
- React.createElement("p", { className: "MoliDebug-info" }, config?.schain.supplyChainStartNode.sid === adstxtEntry[1]
576
- ? `βœ… Seller ids in ad tag config and ads.txt of domain ${adstxtDomain} are matching!`
577
- : `❗️Seller ids in ad tag config (${config?.schain.supplyChainStartNode.sid}) and ads.txt of current domain (${adstxtDomain}, ${adstxtEntry[1]}) are different!`),
578
- 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.`)),
579
- React.createElement("form", { className: "MoliDebug-formContainer MoliDebug-panel MoliDebug-panel--blue", onSubmit: async (event) => {
580
- event.preventDefault();
581
- const newAdsTxtDomain = event.target[0].value;
582
- this.setState({
583
- adstxtDomain: newAdsTxtDomain,
584
- adstxtEntry: (await this.findPublisherEntryInAdsTxt(newAdsTxtDomain)) ?? []
585
- });
586
- } },
587
- React.createElement("label", { htmlFor: "newDomain" }, "Use different ads.txt domain for seller id comparison:"),
588
- React.createElement("div", null,
589
- React.createElement("input", { type: "text", placeholder: "Enter new domain", name: "newDomain", id: "newDomain" }),
590
- React.createElement("button", { className: "MoliDebug-button", type: "submit" }, "Go!")))))),
591
- React.createElement("div", { className: "MoliDebug-sidebarSection MoliDebug-sidebarSection--supplyChain" },
592
- React.createElement("h4", null,
593
- this.collapseToggle('adDensity'),
594
- "Ad Density"),
595
- expandSection.adDensity && (React.createElement(React.Fragment, null,
596
- React.createElement("form", { className: "MoliDebug-formContainer MoliDebug-panel MoliDebug-panel--blue", onSubmit: async (event) => {
597
- event.preventDefault();
598
- const contentSelector = event.target[0].value;
599
- const { totalAdDensity, adAreaPerSlot } = calculateAdDensity(contentSelector, undefined);
600
- const percentagePerSlot = adAreaPerSlot.map(adArea => {
601
- if (!adArea || !adDensity.totalAdDensity) {
602
- return {
603
- adSlotId: adArea?.adSlot ? adArea.adSlot : 'unknown',
604
- percentage: '0.00'
605
- };
606
- }
607
- return {
608
- adSlotId: adArea.adSlot,
609
- percentage: ((adArea.adArea / adDensity.totalAdDensity) * 100).toFixed(2)
610
- };
611
- });
612
- this.setState({
613
- adDensity: { totalAdDensity, percentagePerSlot }
614
- });
615
- } },
616
- React.createElement("label", { htmlFor: "adDensitySelector" }, "Calculate ad density of the content element"),
617
- React.createElement("div", null,
618
- React.createElement("input", { type: "text", placeholder: "Enter CSS selector", name: "adDensitySelector", id: "adDensitySelector" }),
619
- React.createElement("button", { className: "MoliDebug-button", type: "submit" }, "Go!"))),
620
- React.createElement("div", { className: "MoliDebug-tagContainer" },
621
- React.createElement(TagLabel, null, "Ad Density"),
622
- React.createElement(Tag, { variant: 'green' }, adDensity.totalAdDensity)),
623
- adDensity.percentagePerSlot.length > 0 && (React.createElement(React.Fragment, null,
624
- React.createElement("hr", null),
625
- React.createElement("h4", null, "Percentage of ad slot area on total ad area"),
626
- adDensity.percentagePerSlot.map(percentage => {
627
- return (React.createElement("div", { className: "MoliDebug-tagContainer", key: percentage.adSlotId },
628
- React.createElement(TagLabel, null, extractPositionFromPath(percentage.adSlotId)),
629
- React.createElement(Tag, { variant: 'green' },
630
- percentage.percentage,
631
- "%")));
632
- }),
633
- React.createElement("hr", null))))))))));
607
+ React.createElement("nav", { className: "sticky top-0 z-10 mb-3 flex items-center gap-3 bg-base-100 px-3 py-1" },
608
+ React.createElement(Tabs, { tabs: [
609
+ { id: 'overview', label: 'Overview' },
610
+ { id: 'adSetup', label: 'Ad Setup' },
611
+ { id: 'debugging', label: React.createElement(React.Fragment, null,
612
+ "Debugging ",
613
+ this.validationCountTag()) }
614
+ ], active: activeTab, onSelect: tab => this.setState({ activeTab: tab }) }),
615
+ this.renderThemeDropdown(),
616
+ React.createElement("button", { className: "d-btn d-btn-ghost d-btn-sm d-btn-square text-base", title: "Close moli console", onClick: this.toggleSidebar }, "\u2715")),
617
+ activeTab === 'overview' && this.renderOverview(config),
618
+ activeTab === 'adSetup' && this.renderAdSetup(config),
619
+ activeTab === 'debugging' && this.renderDebugging(config)))));
634
620
  }
635
621
  }