{"version":3,"file":"main.mjs","sources":["../../../../node_modules/@nessie/web-static/dist/scripts/p13n/registry.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/ocp-image.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/adapters/banner/image.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/adapters/banner/index.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/constants.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/cdp-observer.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/service.ts","../../../../node_modules/@nessie/web-static/dist/scripts/p13n/init.ts","../../../../src/layouts/BaseLayout.astro?astro&type=script&index=0&lang.ts"],"sourcesContent":["// Component adapter registry.\n//\n// The generic p13n core looks up an adapter by name (the element's\n// `data-p13n-component` attribute) to learn how to build a personalized node.\n// Register an adapter per component type — the core never references a concrete\n// component, so any component can be personalized by supplying an adapter.\n\nimport type { ComponentAdapter } from './types';\n\nconst adapters = new Map();\n\n/** Registers (or replaces) the adapter for a component name, e.g. 'nes-banner'. */\nexport const registerAdapter = (name: string, adapter: ComponentAdapter): void => {\n adapters.set(name, adapter);\n};\n\n/** Returns the adapter registered for a component name, or undefined. */\nexport const getAdapter = (name: string): ComponentAdapter | undefined => adapters.get(name);\n","// OCP image primitives.\n//\n// URL template resolution, srcset building, and template validation.\n// Banner-specific responsive configuration lives in adapters/banner/image.ts.\n\n// ── OCP Crop Mapping ─────────────────────────────────────────────────────────\n// Maps aspect ratios to OCP crop names from CoreMedia\n\nexport const OCP_CROPS = {\n '3:1': 'panorama_ratio3x1',\n '2:1': 'landscape_ratio2x1',\n '3:2': 'landscape_ratio3x2',\n} as const;\n\n/**\n * Builds a concrete image URL from an OCP URL template.\n *\n * @param urlTemplate - OCP URL with {cropName} and {width} placeholders (URL-encoded as %7B/%7D)\n * @param cropName - OCP crop name (e.g., 'landscape_ratio16x9')\n * @param width - Image width in pixels\n * @returns Concrete image URL\n *\n * @example\n * buildOcpImageUrl(\n * 'https://ocp.ns.nl/caas/v1/media/stable/123/data/%7BcropName%7D/%7Bwidth%7D/img.webp',\n * 'landscape_ratio2x1',\n * 960\n * )\n * // Returns: 'https://ocp.ns.nl/caas/v1/media/stable/123/data/landscape_ratio2x1/960/img.webp'\n */\nexport const buildOcpImageUrl = (\n urlTemplate: string,\n cropName: string,\n width: number\n): string =>\n urlTemplate\n .replace('%7BcropName%7D', cropName)\n .replace('%7Bwidth%7D', String(width))\n // Also handle non-encoded placeholders for flexibility\n .replace('{cropName}', cropName)\n .replace('{width}', String(width));\n\n/**\n * Builds a srcset string from an OCP URL template.\n *\n * @param urlTemplate - OCP URL template\n * @param cropName - OCP crop name\n * @param widths - Array of widths to include\n * @returns srcset string (e.g., \"url1 320w, url2 640w\")\n */\nexport const buildSrcSet = (\n urlTemplate: string,\n cropName: string,\n widths: readonly number[]\n): string =>\n widths.map((w) => `${buildOcpImageUrl(urlTemplate, cropName, w)} ${w}w`).join(', ');\n\n/**\n * Validates that a URL is an OCP URL template with placeholders.\n *\n * @param url - URL to validate\n * @returns true if URL contains OCP placeholders\n */\nexport const isOcpUrlTemplate = (url: string): boolean =>\n url.includes('%7BcropName%7D') ||\n url.includes('%7Bwidth%7D') ||\n url.includes('{cropName}') ||\n url.includes('{width}');\n","// Banner image responsive configuration.\n//\n// Owns the banner presentation layer for OCP images: variant types (width,\n// container, heading level), responsive breakpoint configs, and the transform\n// that converts an OCP URL template into a NesBannerPicture ready for\n// . The core OCP URL/srcset primitives live in `../../ocp-image`.\n\nimport type { NesBannerPicture } from '@nessie/webcomponents';\nimport type { BannerVariant, BannerWidth, BannerContainer } from './types';\nimport { OCP_CROPS, buildOcpImageUrl, buildSrcSet } from '../../ocp-image';\n\n/** BannerVariant — controlled by page author, not CDP */\n\ninterface ResponsiveBreakpoint {\n media?: string;\n crop: string;\n widths: readonly number[];\n sizes: (container: BannerContainer) => string;\n}\n\n// ── Container Max Widths ─────────────────────────────────────────────────────\n// From design tokens: nes-applied-container-max-width-*\n\nconst CONTAINER_MAX_WIDTH = {\n default: '90rem', // 1440px\n narrow: '67.5rem', // 1080px\n} as const;\n\n// ── Screen Breakpoints ───────────────────────────────────────────────────────\n// From design tokens: nes-core-screen-*\n\nconst SCREENS = {\n sm: '30rem', // 480px\n md: '48rem', // 768px\n xl: '80rem', // 1280px\n} as const;\n\n// ── Responsive Configurations by Banner Width ────────────────────────────────\n/**\n * Responsive configurations per banner width variant.\n * Maps viewport breakpoints to OCP crop names and available widths.\n *\n * Based on:\n * - Banner CSS breakpoints from nes-banner.scss\n * - pictureSrc config in cms-frontend/src/components/Banner.astro\n * - OCP Responsive Image Settings from CoreMedia\n */\nconst BANNER_RESPONSIVE_CONFIGS: Record = {\n // ── Full width banner ────────────────────────────────────────────────────\n // Desktop: 69.25rem+ (1108px) — 3:1 panorama\n // Tablet: 30rem+ (480px) — 2:1 landscape\n // Mobile: fallback — 3:2 landscape\n full: [\n {\n media: '(min-width: 69.25rem)',\n crop: OCP_CROPS['3:1'],\n widths: [1920, 1440, 960, 600],\n sizes: (container) =>\n container === 'default'\n ? `(min-width: ${CONTAINER_MAX_WIDTH.default}) 58rem, 55vw`\n : `(min-width: ${CONTAINER_MAX_WIDTH.narrow}) 42rem, 55vw`,\n },\n {\n media: `(min-width: ${SCREENS.sm})`,\n crop: OCP_CROPS['2:1'],\n widths: [1280, 960, 640, 480],\n sizes: () => '42vw',\n },\n {\n crop: OCP_CROPS['3:2'],\n widths: [960, 640, 480, 320],\n sizes: () => '100vw',\n },\n ],\n\n // ── Intro banner ─────────────────────────────────────────────────────────\n // Desktop: 61.25rem+ (980px) — 2:1 landscape\n // Tablet: 30rem+ (480px) — 2:1 landscape\n // Mobile: fallback — 3:2 landscape\n intro: [\n {\n media: '(min-width: 61.25rem)',\n crop: OCP_CROPS['2:1'],\n widths: [1280, 960, 640, 480, 320],\n sizes: (container) =>\n container === 'default'\n ? `(min-width: ${CONTAINER_MAX_WIDTH.default}) 46rem, 43vw`\n : `(min-width: ${CONTAINER_MAX_WIDTH.narrow}) 36rem, 43vw`,\n },\n {\n media: `(min-width: ${SCREENS.sm})`,\n crop: OCP_CROPS['2:1'],\n widths: [1600, 1280, 960, 640, 480],\n sizes: () => '85vw',\n },\n {\n crop: OCP_CROPS['3:2'],\n widths: [960, 640, 480, 320],\n sizes: () => '100vw',\n },\n ],\n\n // ── Half width banner ────────────────────────────────────────────────────\n // Desktop: 80rem+ (1280px) — 2:1 landscape\n // Tablet md: 48rem+ (768px) — 3:2 landscape\n // Tablet sm: 30rem+ (480px) — 2:1 landscape\n // Mobile: fallback — 3:2 landscape\n half: [\n {\n media: `(min-width: ${SCREENS.xl})`,\n crop: OCP_CROPS['2:1'],\n widths: [640, 480, 320],\n sizes: (container) =>\n container === 'default'\n ? `(min-width: ${CONTAINER_MAX_WIDTH.default}) 23rem, 21vw`\n : `(min-width: ${CONTAINER_MAX_WIDTH.narrow}) 16rem, 21vw`,\n },\n {\n media: `(min-width: ${SCREENS.md})`,\n crop: OCP_CROPS['3:2'],\n widths: [960, 640, 480, 320],\n sizes: () => '42vw',\n },\n {\n media: `(min-width: ${SCREENS.sm})`,\n crop: OCP_CROPS['2:1'],\n widths: [640, 480, 320, 240],\n sizes: () => '42vw',\n },\n {\n crop: OCP_CROPS['3:2'],\n widths: [960, 640, 480, 320],\n sizes: () => '100vw',\n },\n ],\n};\n\n/**\n * Transforms an OCP URL template into a NesBannerPicture object\n * with responsive srcsets for mobile, tablet, and desktop viewports.\n *\n * @param urlTemplate - OCP URL with {cropName} and {width} placeholders\n * @param alt - Alt text for the image\n * @param mimeType - MIME type for the image sources (defaults to 'image/webp')\n * @param variant - Banner variant with width and container (defaults to full/default)\n * @returns NesBannerPicture object ready for nes-banner component\n *\n * @example\n * transformOcpToPicture(\n * 'https://ocp.ns.nl/caas/v1/media/stable/123/data/%7BcropName%7D/%7Bwidth%7D/promo.webp',\n * 'Summer promotion banner',\n * 'image/webp',\n * { width: 'half', container: 'narrow' }\n * )\n */\nexport const transformOcpToPicture = (\n urlTemplate: string,\n alt: string,\n mimeType = 'image/webp',\n variant: BannerVariant = {}\n): NesBannerPicture => {\n const width = variant.width ?? 'full';\n const container = variant.container ?? 'default';\n const config = BANNER_RESPONSIVE_CONFIGS[width];\n\n const sourceSet = config.map((breakpoint) => ({\n ...(breakpoint.media && { media: breakpoint.media }),\n srcset: buildSrcSet(urlTemplate, breakpoint.crop, breakpoint.widths),\n sizes: breakpoint.sizes(container),\n type: mimeType,\n }));\n\n // Use mobile config (last item) for fallback img src\n const mobileConfig = config[config.length - 1];\n const fallbackSrc = buildOcpImageUrl(\n urlTemplate,\n mobileConfig.crop,\n mobileConfig.widths[mobileConfig.widths.length - 1] // smallest width\n );\n\n return {\n sourceSet,\n imgAttr: {\n src: fallbackSrc,\n alt,\n },\n };\n};\n","// Banner component adapter.\n//\n// Teaches the generic p13n core how to turn CDP `BannerData` into a personalized\n// `` link. All banner specifics — property mapping, OCP image\n// transformation and image preloading — live here, so the core stays\n// component-agnostic. Registering this module wires the adapter to the\n// `nes-banner` component name.\n\nimport type { NesBannerPicture } from '@nessie/webcomponents/dist/types/components/nes-banner/nes-banner.interface';\nimport type {\n BannerData,\n BuildContext,\n BuildResult,\n ComponentAdapter,\n OcpPictureData,\n} from '../../types';\nimport { registerAdapter } from '../../registry';\nimport { isOcpUrlTemplate } from '../../ocp-image';\nimport { transformOcpToPicture } from './image';\nimport type { BannerVariant } from './types';\n\n/** Component name this adapter handles (matches `data-p13n-component`). */\nexport const BANNER_COMPONENT = 'nes-banner';\n\n/**\n * Safety net (ms): if the personalized image hasn't loaded by this point, swap\n * the banner in anyway so the skeleton can't linger indefinitely.\n */\nconst SWAP_TIMEOUT = 2000;\n\n/**\n * Picks the responsive candidate the rendered `` will actually display\n * by matching each source's media query, falling back to the base `imgAttr.src`.\n */\nconst resolvePreloadSource = (\n picture: NesBannerPicture\n): { src: string; srcset?: string; sizes?: string } => {\n const canMatch = typeof window.matchMedia === 'function';\n const match = picture.sourceSet?.find(\n (source) => !source.media || (canMatch && window.matchMedia(source.media).matches)\n );\n return match\n ? { src: picture.imgAttr.src, srcset: match.srcset, sizes: match.sizes }\n : { src: picture.imgAttr.src };\n};\n\n/**\n * Warms the browser cache for the banner image, then runs `done` (synchronously\n * when the image is already cached). This keeps the SSR skeleton on screen until\n * the personalized image is ready, avoiding an empty frame between skeleton\n * teardown and the real banner painting on slow connections. A timeout\n * guarantees the swap happens even if the image stalls.\n */\nconst preloadImage = (picture: NesBannerPicture | undefined, done: () => void): void => {\n const src = picture?.imgAttr?.src;\n if (!picture || !src) {\n done();\n return;\n }\n\n let settled = false;\n const finish = (): void => {\n if (settled) return;\n settled = true;\n done();\n };\n\n const img = new window.Image();\n const { srcset, sizes } = resolvePreloadSource(picture);\n if (sizes) img.sizes = sizes;\n if (srcset) img.srcset = srcset;\n img.src = src;\n\n if (img.complete) {\n finish();\n return;\n }\n\n img.addEventListener('load', finish, { once: true });\n img.addEventListener('error', finish, { once: true });\n window.setTimeout(finish, SWAP_TIMEOUT);\n};\n\nconst isOcpPictureData = (\n picture?: NesBannerPicture | OcpPictureData\n): picture is OcpPictureData => {\n return (picture as OcpPictureData)?.ocpPictureUrlTemplate !== undefined;\n};\n\n/** Resolves the banner picture: OCP URL template takes precedence over `picture`. */\nconst buildPicture = (\n data: BannerData,\n variant: BannerVariant\n): NesBannerPicture | undefined => {\n if (isOcpPictureData(data.picture)) {\n const ocpPictureUrlTemplate = data.picture.ocpPictureUrlTemplate;\n if (ocpPictureUrlTemplate && isOcpUrlTemplate(ocpPictureUrlTemplate)) {\n return transformOcpToPicture(\n ocpPictureUrlTemplate,\n data.picture.alt ?? '',\n data.picture.mimeType,\n variant\n );\n }\n } else {\n return data.picture;\n }\n};\n\n/** Builds the personalized `` from CDP data + author variant. */\nconst buildBanner = (\n data: BannerData,\n variant: BannerVariant,\n picture: NesBannerPicture | undefined\n): HTMLElement => {\n const banner = document.createElement('nes-banner');\n\n if (variant.filled !== undefined) banner.filled = variant.filled;\n if (variant.headingLevel !== undefined) banner.headingLevel = `h${variant.headingLevel}`;\n if (variant.hover !== undefined) banner.hover = variant.hover;\n\n if (data.description !== undefined) banner.description = data.description;\n if (data.heading !== undefined) banner.heading = data.heading;\n if (data.inverse !== undefined) banner.inverse = data.inverse;\n if (data.objectFit !== undefined) banner.objectFit = data.objectFit;\n if (data.price !== undefined) {\n banner.price = {\n amount: data.price.amount,\n previousPrice: data.price.previousPrice,\n leadingText: data.price.leadingText,\n trailingText: data.price.trailingText,\n };\n }\n if (data.sticker !== undefined) banner.sticker = data.sticker;\n\n if (picture !== undefined) banner.picture = picture;\n\n return banner;\n};\n\nconst build = ({ data, variant }: BuildContext): BuildResult | null => {\n if (!data.href) {\n console.warn(\n '[p13n] BannerData.href is required but was not provided — keeping SSR fallback'\n );\n return null;\n }\n\n const bannerVariant = variant as BannerVariant;\n const picture = buildPicture(data, bannerVariant);\n const banner = buildBanner(data, bannerVariant, picture);\n\n // The banner is a link: wrap the web component in a plain carrying the\n // href + analytics attributes.\n // The web component owns its own layout, so the link needs no banner class.\n const link = document.createElement('a');\n link.className = 'nes-focus-ring-offset-lg';\n link.setAttribute('href', data.href);\n if (data.openInNewTab) {\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n }\n if (data.eventData !== undefined) {\n link.setAttribute('data-nes-event', data.eventData);\n }\n link.appendChild(banner);\n\n return {\n element: link,\n readyTarget: banner,\n whenReady: (done) => preloadImage(picture, done),\n };\n};\n\nexport const bannerAdapter: ComponentAdapter = { build };\n\nregisterAdapter(BANNER_COMPONENT, bannerAdapter);\n","// Generic, component-agnostic hooks shared by the p13n core and every component\n// adapter. Nothing here knows about a specific component — adapters supply their\n// own building/reveal logic and components supply their own loading visual.\n\n/** Marks an element that is still waiting for the CDP (showing its skeleton). */\nexport const LOADING_ATTR = 'data-p13n-loading';\n\n/** Identifies the personalization slot and is the lookup key for updates. */\nexport const P13N_ID_ATTR = 'data-p13n-id';\n\n/** Names the component adapter responsible for building the personalized node. */\nexport const P13N_COMPONENT_ATTR = 'data-p13n-component';\n\n/** Page-author-controlled, component-specific config (JSON), e.g. banner width. */\nexport const P13N_VARIANT_ATTR = 'data-p13n-variant';\n\n/** Default adapter used when an element omits the component attribute. */\nexport const DEFAULT_COMPONENT = 'nes-banner';\n\n// Marks an element the instant the CDP starts personalizing it. While present,\n// the skeleton must stay and the SSR fallback must NOT be revealed — this\n// prevents revealAll() (fired on onEventReady / timeout) from flashing the old\n// fallback content in the gap before the personalized node is swapped in.\nexport const P13N_PERSONALIZING_ATTR = 'data-p13n-personalizing';\n","import { LOADING_ATTR, P13N_ID_ATTR, P13N_PERSONALIZING_ATTR } from './constants';\n\n// ── Initialization state ─────────────────────────────────────────────────────\n\nlet initialized = false;\n\n// ── Main initialization ──────────────────────────────────────────────────────\n\n/**\n * Initialize banner personalization for all banners on the page.\n *\n * This sets up ONE CDP observer that, when BlueConic is ready, reveals ALL\n * banners that haven't been personalized yet. BlueConic may call updateBanner()\n * for specific banners before onEventReady fires.\n *\n * Call this once per page. Subsequent calls are no-ops.\n *\n * BlueConic timing (confirmed by BC team):\n * - `onEventReady` fires when all BC interactions (dialogs, personalization) are complete\n * - `onBlueConicLoaded` fires when BC script is loaded but before interactions complete\n *\n * Scenarios:\n * 1. CDP disabled/errored: reveal all SSR fallbacks immediately\n * 2. CDPLoadingObserver reports failure: reveal all SSR fallbacks\n * 3. CDPLoadingObserver reports success: subscribe to BC onEventReady, then reveal remaining\n * 4. CDPLoadingObserver absent: fall back to direct waitForBlueConic\n * 5. window.load safety net: BC script never loaded at all\n */\nexport const initCDPObserver = (): void => {\n if (initialized) return;\n initialized = true;\n\n // Scenario 1: CDP disabled or already failed synchronously\n if (window.cdpDisabled || window.cdpLoadError) {\n revealAll();\n return;\n }\n\n // Scenario 5: ultimate safety net — BC script never executed\n window.addEventListener(\n 'load',\n () => {\n if (window.cdpLoadError || typeof window.blueConicClient === 'undefined') {\n revealAll();\n }\n },\n { once: true }\n );\n\n // Scenarios 2–4: subscribe via CDPLoadingObserver when present. addCDPListener\n // fires immediately if the BC script has already loaded/errored, or deferred\n // once its onload/onerror fires\n if (typeof window.CDPLoadingObserver !== 'undefined') {\n window.CDPLoadingObserver.addCDPListener((success) => {\n if (!success) {\n revealAll();\n } else {\n try {\n waitForBlueConic(revealAll);\n } catch (err) {\n console.error('[p13n] Error initializing CDP observer:', err);\n revealAll();\n }\n }\n });\n } else {\n // CDPLoadingObserver not present — subscribe to BC directly\n try {\n waitForBlueConic(revealAll);\n } catch (err) {\n console.error('[p13n] Error initializing CDP observer:', err);\n revealAll();\n }\n }\n};\n\n// ── Fallback reveal ──────────────────────────────────────────────────────────\n\n/**\n * Reveals all personalized banners that are still hidden (showing SSR fallback).\n * Called when CDP is done or unavailable.\n */\nexport const revealAll = (): void => {\n // Skip elements that are mid-personalization (data-p13n-personalizing). Their\n // skeleton must stay until updateBanner() swaps in the personalized content;\n // revealing the SSR fallback here would flash the old, non-personalized text.\n document\n .querySelectorAll(\n `[${P13N_ID_ATTR}][${LOADING_ATTR}]:not([${P13N_PERSONALIZING_ATTR}])`\n )\n .forEach(revealFallback);\n};\n\n/**\n * Reveals a single banner's SSR fallback.\n *\n * The fallback markup — including its ``/`` — is rendered inside a\n * `