@guardian/commercial-core 4.4.0 → 4.7.0

package/dist/cjs/ad-sizes.d.ts

@@ -1,3 +1,4 @@
+import type { Breakpoint } from './lib/breakpoint';
 declare type AdSizeString = 'fluid' | `${number},${number}`;
 /**
  * Store ad sizes in a way that is compatible with google-tag but also accessible via
@@ -24,9 +25,8 @@ declare class AdSize extends Array<number> {
     get width(): number;
     get height(): number;
 }
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper' | 'cascade';
 declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky' | 'crossword-banner';
-declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
 declare const createAdSize: (width: number, height: number) => AdSize;

package/dist/cjs/ad-sizes.js

@@ -62,6 +62,7 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
+    cascade: createAdSize(940, 230),
 };
 const adSizes = {
     ...adSizesPartial,

package/dist/cjs/create-ad-slot.d.ts

@@ -1,9 +1,17 @@
-import type { AdSize } from './ad-sizes';
+import type { SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
-    sizes?: Record<string, AdSize[]>;
 };
-export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
-export {};
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+declare const concatSizeMappings: (defaultSizeMappings: SizeMapping, optionSizeMappings?: SizeMapping) => SizeMapping;
+declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export { createAdSlot, concatSizeMappings };

package/dist/cjs/create-ad-slot.js

@@ -1,61 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAdSlot = void 0;
-const ad_sizes_1 = require("./ad-sizes");
+exports.concatSizeMappings = exports.createAdSlot = void 0;
+const breakpoint_1 = require("./lib/breakpoint");
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: ad_sizes_1.slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
-    },
-    inline: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['inline'],
-    },
-    mostpop: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['mostpop'],
-    },
-    comments: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['comments'],
-    },
-    'top-above-nav': {
-        sizeMappings: ad_sizes_1.slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: ad_sizes_1.slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: ad_sizes_1.slotSizeMappings['mobile-sticky'],
     },
 };
 /**
@@ -84,10 +65,10 @@ const createAdSlotElement = (name, attrs, classes) => {
     const adSlot = document.createElement('div');
     adSlot.id = id;
     adSlot.className = `js-ad-slot ad-slot ${classes.join(' ')}`;
-    adSlot.setAttribute('data-link-name', `ad slot ${name}`);
-    adSlot.setAttribute('data-name', name);
+    adSlot.dataset.linkName = `ad slot ${name}`;
+    adSlot.dataset.name = name;
     adSlot.setAttribute('aria-hidden', 'true');
-    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    Object.entries(attrs).forEach(([k, v]) => (adSlot.dataset[k] = v));
     return adSlot;
 };
 /**
@@ -102,53 +83,25 @@ const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), sl
  * 2. If so concat the size mappings
  *
  */
-const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
-    if (!optionSizeMappings)
-        return defaultSizeMappings;
-    const concatenatedSizeMappings = { ...defaultSizeMappings };
-    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
-    for (let i = 0; i < optionDevices.length; i++) {
-        const device = optionDevices[i];
-        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
-            const optionSizeMappingsForDevice = optionSizeMappings[device];
-            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
-            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
-                // TODO can we do concatenatedSizeMappings[device]?.concat ?
-                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
-            }
-        }
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Object.entries(optionSizeMappings).reduce((sizeMappings, [breakpoint, optionSizes]) => {
+    // Only perform concatenation if breakpoint is of the correct type
+    if ((0, breakpoint_1.isBreakpoint)(breakpoint)) {
+        // Concatenate the option sizes onto any existing sizes present for a given breakpoint
+        sizeMappings[breakpoint] = (sizeMappings[breakpoint] ?? []).concat(optionSizes);
     }
-    return concatenatedSizeMappings;
-};
-/**
- * Convert size mappings to a string that will be added to the ad slot
- * data attributes.
- *
- * e.g. { desktop: [[320,250], [320, 280]] } => { desktop: '320,250|320,280' }
- *
- */
-const covertSizeMappingsToStrings = (sizeMappings) => Object.entries(sizeMappings).reduce((result, [device, sizes]) => {
-    result[device] = sizes.join('|');
-    return result;
-}, {});
-/**
- * Prefix all object keys with data-${key}
- */
-const createDataAttributes = (attrs) => Object.entries(attrs).reduce((result, [key, value]) => {
-    result[`data-${key}`] = value;
-    return result;
-}, {});
+    return sizeMappings;
+}, { ...defaultSizeMappings });
+exports.concatSizeMappings = concatSizeMappings;
 const createAdSlot = (name, options = {}) => {
-    const adSlotConfig = adSlotConfigs[name];
+    const adSlotConfig = adSlotConfigs[name] ?? {};
     const slotName = options.name ?? adSlotConfig.name ?? name;
-    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
-    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    const dataAttributes = {};
     if (adSlotConfig.label === false) {
-        attributes.label = 'false';
+        dataAttributes.label = 'false';
     }
     if (adSlotConfig.refresh === false) {
-        attributes.refresh = 'false';
+        dataAttributes.refresh = 'false';
     }
-    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+    return createAdSlotElement(slotName, dataAttributes, createClasses(slotName, options.classes));
 };
 exports.createAdSlot = createAdSlot;

package/dist/cjs/index.d.ts

@@ -8,13 +8,15 @@ export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
+export type { Breakpoint } from './lib/breakpoint';
 export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
+exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.concatSizeMappings = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.isBreakpoint = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
 var ias_1 = require("./third-party-tags/ias");
 Object.defineProperty(exports, "ias", { enumerable: true, get: function () { return ias_1.ias; } });
 var permutive_1 = require("./third-party-tags/permutive");
@@ -47,6 +47,8 @@ Object.defineProperty(exports, "adSizes", { enumerable: true, get: function () {
 Object.defineProperty(exports, "getAdSize", { enumerable: true, get: function () { return ad_sizes_1.getAdSize; } });
 Object.defineProperty(exports, "slotSizeMappings", { enumerable: true, get: function () { return ad_sizes_1.slotSizeMappings; } });
 Object.defineProperty(exports, "createAdSize", { enumerable: true, get: function () { return ad_sizes_1.createAdSize; } });
+var breakpoint_1 = require("./lib/breakpoint");
+Object.defineProperty(exports, "isBreakpoint", { enumerable: true, get: function () { return breakpoint_1.isBreakpoint; } });
 var detect_ad_blocker_1 = require("./detect-ad-blocker");
 Object.defineProperty(exports, "isAdBlockInUse", { enumerable: true, get: function () { return detect_ad_blocker_1.isAdBlockInUse; } });
 var permutive_2 = require("./permutive");
@@ -62,6 +64,7 @@ Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true,
 Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });
 var create_ad_slot_1 = require("./create-ad-slot");
 Object.defineProperty(exports, "createAdSlot", { enumerable: true, get: function () { return create_ad_slot_1.createAdSlot; } });
+Object.defineProperty(exports, "concatSizeMappings", { enumerable: true, get: function () { return create_ad_slot_1.concatSizeMappings; } });
 exports.constants = __importStar(require("./constants"));
 var content_1 = require("./targeting/content");
 Object.defineProperty(exports, "getContentTargeting", { enumerable: true, get: function () { return content_1.getContentTargeting; } });

package/dist/cjs/lib/breakpoint.d.ts

@@ -0,0 +1,4 @@
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare const isBreakpoint: (s: string) => s is Breakpoint;
+export type { Breakpoint };
+export { isBreakpoint };

package/dist/cjs/lib/breakpoint.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBreakpoint = void 0;
+const isBreakpoint = (s) => s === 'mobile' || s === 'phablet' || s === 'tablet' || s === 'desktop';
+exports.isBreakpoint = isBreakpoint;

package/dist/esm/ad-sizes.d.ts

@@ -1,3 +1,4 @@
+import type { Breakpoint } from './lib/breakpoint';
 declare type AdSizeString = 'fluid' | `${number},${number}`;
 /**
  * Store ad sizes in a way that is compatible with google-tag but also accessible via
@@ -24,9 +25,8 @@ declare class AdSize extends Array<number> {
     get width(): number;
     get height(): number;
 }
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper' | 'cascade';
 declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky' | 'crossword-banner';
-declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
 declare const createAdSize: (width: number, height: number) => AdSize;

package/dist/esm/ad-sizes.js

@@ -58,6 +58,7 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
+    cascade: createAdSize(940, 230),
 };
 const adSizes = {
     ...adSizesPartial,

package/dist/esm/create-ad-slot.d.ts

@@ -1,9 +1,17 @@
-import type { AdSize } from './ad-sizes';
+import type { SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
-    sizes?: Record<string, AdSize[]>;
 };
-export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
-export {};
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+declare const concatSizeMappings: (defaultSizeMappings: SizeMapping, optionSizeMappings?: SizeMapping) => SizeMapping;
+declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export { createAdSlot, concatSizeMappings };

package/dist/esm/create-ad-slot.js

@@ -1,58 +1,39 @@
-import { slotSizeMappings } from './ad-sizes';
+import { isBreakpoint } from './lib/breakpoint';
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: slotSizeMappings['merchandising-high'],
-    },
-    inline: {
-        sizeMappings: slotSizeMappings['inline'],
-    },
-    mostpop: {
-        sizeMappings: slotSizeMappings['mostpop'],
-    },
-    comments: {
-        sizeMappings: slotSizeMappings['comments'],
-    },
-    'top-above-nav': {
-        sizeMappings: slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: slotSizeMappings['mobile-sticky'],
     },
 };
 /**
@@ -81,10 +62,10 @@ const createAdSlotElement = (name, attrs, classes) => {
     const adSlot = document.createElement('div');
     adSlot.id = id;
     adSlot.className = `js-ad-slot ad-slot ${classes.join(' ')}`;
-    adSlot.setAttribute('data-link-name', `ad slot ${name}`);
-    adSlot.setAttribute('data-name', name);
+    adSlot.dataset.linkName = `ad slot ${name}`;
+    adSlot.dataset.name = name;
     adSlot.setAttribute('aria-hidden', 'true');
-    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    Object.entries(attrs).forEach(([k, v]) => (adSlot.dataset[k] = v));
     return adSlot;
 };
 /**
@@ -99,52 +80,24 @@ const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), sl
  * 2. If so concat the size mappings
  *
  */
-const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
-    if (!optionSizeMappings)
-        return defaultSizeMappings;
-    const concatenatedSizeMappings = { ...defaultSizeMappings };
-    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
-    for (let i = 0; i < optionDevices.length; i++) {
-        const device = optionDevices[i];
-        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
-            const optionSizeMappingsForDevice = optionSizeMappings[device];
-            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
-            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
-                // TODO can we do concatenatedSizeMappings[device]?.concat ?
-                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
-            }
-        }
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Object.entries(optionSizeMappings).reduce((sizeMappings, [breakpoint, optionSizes]) => {
+    // Only perform concatenation if breakpoint is of the correct type
+    if (isBreakpoint(breakpoint)) {
+        // Concatenate the option sizes onto any existing sizes present for a given breakpoint
+        sizeMappings[breakpoint] = (sizeMappings[breakpoint] ?? []).concat(optionSizes);
     }
-    return concatenatedSizeMappings;
-};
-/**
- * Convert size mappings to a string that will be added to the ad slot
- * data attributes.
- *
- * e.g. { desktop: [[320,250], [320, 280]] } => { desktop: '320,250|320,280' }
- *
- */
-const covertSizeMappingsToStrings = (sizeMappings) => Object.entries(sizeMappings).reduce((result, [device, sizes]) => {
-    result[device] = sizes.join('|');
-    return result;
-}, {});
-/**
- * Prefix all object keys with data-${key}
- */
-const createDataAttributes = (attrs) => Object.entries(attrs).reduce((result, [key, value]) => {
-    result[`data-${key}`] = value;
-    return result;
-}, {});
-export const createAdSlot = (name, options = {}) => {
-    const adSlotConfig = adSlotConfigs[name];
+    return sizeMappings;
+}, { ...defaultSizeMappings });
+const createAdSlot = (name, options = {}) => {
+    const adSlotConfig = adSlotConfigs[name] ?? {};
     const slotName = options.name ?? adSlotConfig.name ?? name;
-    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
-    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    const dataAttributes = {};
     if (adSlotConfig.label === false) {
-        attributes.label = 'false';
+        dataAttributes.label = 'false';
     }
     if (adSlotConfig.refresh === false) {
-        attributes.refresh = 'false';
+        dataAttributes.refresh = 'false';
     }
-    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+    return createAdSlotElement(slotName, dataAttributes, createClasses(slotName, options.classes));
 };
+export { createAdSlot, concatSizeMappings };

package/dist/esm/index.d.ts

@@ -8,13 +8,15 @@ export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
+export type { Breakpoint } from './lib/breakpoint';
 export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/esm/index.js

@@ -8,12 +8,13 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export { isBreakpoint } from './lib/breakpoint';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
-export { createAdSlot } from './create-ad-slot';
+export { createAdSlot, concatSizeMappings } from './create-ad-slot';
 import * as constants_1 from './constants';
 export { constants_1 as constants };
 export { getContentTargeting } from './targeting/content';

package/dist/esm/lib/breakpoint.d.ts

@@ -0,0 +1,4 @@
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare const isBreakpoint: (s: string) => s is Breakpoint;
+export type { Breakpoint };
+export { isBreakpoint };

package/dist/esm/lib/breakpoint.js

@@ -0,0 +1,2 @@
+const isBreakpoint = (s) => s === 'mobile' || s === 'phablet' || s === 'tablet' || s === 'desktop';
+export { isBreakpoint };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "4.4.0",
+  "version": "4.7.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {