{"version":3,"file":"client.mjs","sources":["../app/components/hardware-option.ts","../app/components/hardware-overlay.ts","../app/components/short-filter.ts","../app/configs/requests.ts","../app/configs/environment.ts","../app/client.ts","../app/components/navigation.ts"],"sourcesContent":["import {HardwareFilterOption} from '../types/types.ts';\n\nexport const HardwareOption = ({\n label,\n value,\n isSelected,\n isDisabled,\n}: HardwareFilterOption & {isSelected: boolean; isDisabled: boolean}) => `\n \n`;\n\nexport const setupHardwareOption = ({\n shadowRoot,\n changeHardwareSelection,\n}: {\n shadowRoot: ShadowRoot;\n changeHardwareSelection: (value: string) => void;\n}) => {\n shadowRoot.querySelectorAll('.checkbox').forEach(checkbox => {\n checkbox.addEventListener('change', event => {\n const value = (event.target as HTMLElement).dataset.value;\n if (!value) return;\n changeHardwareSelection(value);\n });\n });\n};\n","import {EnvironmentUrls} from '../configs/environment.ts';\nimport {HardwareFilterCategory} from '../types/types.ts';\nimport {HardwareOption, setupHardwareOption} from './hardware-option.ts';\n\nconst MAX_SELECTION_COUNT = 3;\n\ninterface OverlayHandlers {\n documentHandler: EventListener;\n shadowHandler: EventListener;\n shadowRootRef: ShadowRoot;\n}\n\nconst overlayHandlers = new WeakMap();\n\nexport const cleanupHardwareOverlay = (shadowRoot: ShadowRoot): void => {\n const handlers = overlayHandlers.get(shadowRoot);\n if (handlers) {\n document.removeEventListener('mousedown', handlers.documentHandler);\n handlers.shadowRootRef.removeEventListener('mousedown', handlers.shadowHandler, true);\n overlayHandlers.delete(shadowRoot);\n }\n};\n\nconst getSelectionCount = (selectedHardware: Array) => {\n if (selectedHardware.length === 1 && selectedHardware[0] === 'all') return 0;\n return selectedHardware.length;\n};\n\nconst getHintText = (selectedHardware: Array) => {\n const selectionCount = getSelectionCount(selectedHardware);\n\n if (selectionCount === 0) return `Sie können bis zu ${MAX_SELECTION_COUNT} Handys wählen`;\n\n const remainingSelectableCount = MAX_SELECTION_COUNT - selectionCount;\n\n switch (remainingSelectableCount) {\n case 0:\n return `Sie haben ${selectionCount} Handys zur Auswahl hinzugefügt`;\n case 1:\n return 'Sie können noch ein weiteres Handy wählen';\n default:\n return `Sie können noch ${remainingSelectableCount} weitere Handys wählen`;\n }\n};\n\nexport const HardwareOverlay = ({\n hardwareOptions,\n selectedHardware,\n isHardwareOverlayVisible,\n environment,\n}: {\n hardwareOptions: Array;\n selectedHardware: Array;\n isHardwareOverlayVisible: boolean;\n environment: EnvironmentUrls;\n}) => `\n
\n
Ihre Handyauswahl
\n
\n = MAX_SELECTION_COUNT ? 'holding-slider/check-blue.svg' : 'holding-slider/light-bulb.svg'}\"\n class=\"hint-icon\"\n width=\"18\"\n height=\"18\"\n loading=\"lazy\"\n />\n
\n ${getHintText(selectedHardware)}\n
\n
\n
\n ${HardwareOption({\n label: 'Alle Handys',\n value: 0,\n isSelected: selectedHardware.length === 0,\n isDisabled: selectedHardware.length >= MAX_SELECTION_COUNT,\n })}\n ${hardwareOptions\n .map(\n section => `\n
${section.label}
\n ${section.options\n .map(option =>\n HardwareOption({\n ...option,\n isSelected: selectedHardware.includes(`${option.value}`),\n isDisabled: selectedHardware.length >= MAX_SELECTION_COUNT,\n }),\n )\n .join('')}\n `,\n )\n .join('')}\n
\n \n Auswahl übernehmen\n \n
\n`;\n\n// Attach dismiss-on-outside-click listeners. Called independently from the\n// rest of the setup so the host can toggle overlay visibility without\n// rebinding button/checkbox listeners (which would cause duplicate handlers).\nexport const attachHardwareOverlayDismissListeners = (\n shadowRoot: ShadowRoot,\n closeHardwareOverlay: () => void,\n): void => {\n cleanupHardwareOverlay(shadowRoot);\n\n // Clicks outside the closed shadow host: composedPath reveals only the\n // host (shadow internals are hidden), so anything not including it is\n // clearly outside and should dismiss the overlay.\n const documentHandler: EventListener = event => {\n if (event.composedPath().includes(shadowRoot.host)) return;\n cleanupHardwareOverlay(shadowRoot);\n closeHardwareOverlay();\n };\n\n // Clicks inside the shadow: use a capture-phase listener on the\n // shadowRoot so we can see the real target (composedPath inside the\n // shadow exposes internal nodes). Dismiss unless the click landed on\n // the overlay itself or its trigger (the trigger has its own toggle).\n const shadowHandler: EventListener = event => {\n const path = event.composedPath();\n const overlay = shadowRoot.getElementById('hardware-overlay');\n const trigger = shadowRoot.getElementById('hardware-selection');\n if (overlay && path.includes(overlay)) return;\n if (trigger && path.includes(trigger)) return;\n cleanupHardwareOverlay(shadowRoot);\n closeHardwareOverlay();\n };\n\n overlayHandlers.set(shadowRoot, {documentHandler, shadowHandler, shadowRootRef: shadowRoot});\n document.addEventListener('mousedown', documentHandler);\n shadowRoot.addEventListener('mousedown', shadowHandler, true);\n};\n\nexport const setupHardwareOverlay = ({\n shadowRoot,\n closeHardwareOverlay,\n changeHardwareSelection,\n isHardwareOverlayVisible,\n}: {\n shadowRoot: ShadowRoot;\n closeHardwareOverlay: () => void;\n isHardwareOverlayVisible: boolean;\n} & Parameters[0]) => {\n cleanupHardwareOverlay(shadowRoot);\n\n if (isHardwareOverlayVisible) {\n attachHardwareOverlayDismissListeners(shadowRoot, closeHardwareOverlay);\n }\n\n shadowRoot.getElementById('hardware-button')?.addEventListener('click', () => {\n cleanupHardwareOverlay(shadowRoot);\n closeHardwareOverlay();\n });\n shadowRoot.getElementById('overlay-header')?.addEventListener('click', () => {\n cleanupHardwareOverlay(shadowRoot);\n closeHardwareOverlay();\n });\n\n setupHardwareOption({shadowRoot, changeHardwareSelection});\n};\n","import {HardwareFilterCategory, DataIncludedFilterOption, HardwareFilterOption} from '../types/types.ts';\nimport {FilterIcon} from './filter-icon.ts';\nimport {EnvironmentUrls} from '../configs/environment.ts';\nimport {HardwareOverlay, setupHardwareOverlay} from './hardware-overlay.ts';\n\nconst getHardwarePath = (hardwareSelection: Array) => {\n if (hardwareSelection.length === 0 || hardwareSelection.includes('all')) return 'handy-uebersicht';\n if (hardwareSelection.length === 1) return `vergleich/${hardwareSelection[0]}`;\n return `vergleiche/${hardwareSelection.join('-mit-')}`;\n};\n\nconst getLink = (\n selectedDataIncluded: number,\n hardwareOptions: Array,\n hardwareSelection: Array,\n environment: EnvironmentUrls,\n) => {\n const allOptions = hardwareOptions.flatMap(category => category.options);\n const hardwareKeys = hardwareSelection.map(id => {\n const option = allOptions.find(opt => `${opt.value}` === id);\n return option?.key ?? id;\n });\n \n const queryParams = new URLSearchParams({data_included: `${selectedDataIncluded}`}).toString();\n return `${environment.host}/${getHardwarePath(hardwareKeys)}?${queryParams}`;\n};\n\nconst getHardwareLabel = (hardwareOptions: Array, selectedHardware: Array) => {\n if (selectedHardware.length === 0 || selectedHardware.includes('all')) return 'Alle Handys';\n\n if (selectedHardware.length === 1) {\n return hardwareOptions.reduce((acc, section) => {\n const options = section.options.filter(option => selectedHardware.includes(`${option.value}`));\n return [...acc, ...options];\n }, [] as Array)[0].label;\n }\n\n return `${selectedHardware.length} Handys gewählt`;\n};\n\nexport const ShortFilter = ({\n dataIncluded,\n selectedDataIncluded,\n hardwareOptions,\n selectedHardware,\n isHardwareOverlayVisible,\n environment,\n}: {\n dataIncluded: Array;\n selectedDataIncluded: number;\n hardwareOptions: Array;\n selectedHardware: Array;\n isHardwareOverlayVisible: boolean;\n environment: EnvironmentUrls;\n}): string => `\n
\n
\n
\n
\n \n
${getHardwareLabel(hardwareOptions, selectedHardware)}
\n
\n ${FilterIcon()}\n
\n ${HardwareOverlay({\n hardwareOptions,\n selectedHardware,\n isHardwareOverlayVisible,\n environment,\n })}\n
\n
\n
\n
\n
\n \n \n
\n ${FilterIcon()}\n
\n
\n \n Vergleichen\n \n \n
\n`;\n\nexport const setupShortFilter = ({\n shadowRoot,\n clickFilterCta,\n dataIncludedChange,\n openHardwareOverlay,\n closeHardwareOverlay,\n changeHardwareSelection,\n isHardwareOverlayVisible,\n}: {\n shadowRoot: ShadowRoot;\n clickFilterCta: () => void;\n dataIncludedChange: (selectedValue: number) => void;\n openHardwareOverlay: () => void;\n} & Parameters[0]): void => {\n shadowRoot.getElementById('filter-submit')?.addEventListener('click', () => clickFilterCta());\n shadowRoot.getElementById('data-included')?.addEventListener('change', event => {\n const selectedValue = (event.target as HTMLSelectElement).value;\n dataIncludedChange(parseInt(selectedValue));\n });\n shadowRoot.getElementById('hardware-selection')?.addEventListener('click', () => openHardwareOverlay());\n\n setupHardwareOverlay({\n shadowRoot,\n closeHardwareOverlay,\n changeHardwareSelection,\n isHardwareOverlayVisible,\n });\n};\n","import {EnvironmentUrls} from './environment.ts';\nimport {HardwareFilterCategory, DataIncludedFilterOption, DeviceOutput} from '../types/types.ts';\n\nconst getPubApiDefaultHeaders = (deviceOutput: DeviceOutput) =>\n ({\n 'Accept': 'application/json',\n 'X-App-Version': '1.0.0',\n 'X-App-Platform': deviceOutput,\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json',\n }) as const;\n\nexport const getFilter = async (\n deviceOutput: DeviceOutput,\n environment: EnvironmentUrls,\n signal?: AbortSignal,\n): Promise<{\n dataIncluded: Array;\n hardware: Array;\n}> => {\n try {\n const response = await fetch(`${environment.publicApi}/v1/filter/holding-slider`, {\n method: 'GET',\n headers: getPubApiDefaultHeaders(deviceOutput),\n signal,\n });\n\n if (!response.ok) {\n return {dataIncluded: [], hardware: []};\n }\n\n const json = await response.json();\n\n return {\n dataIncluded: json.data_included || [],\n hardware: json.hw_prop_model_multiselect || [],\n };\n } catch {\n return {dataIncluded: [], hardware: []};\n }\n};\n\nexport const getPrefilling = async (\n deviceOutput: DeviceOutput,\n environment: EnvironmentUrls,\n signal?: AbortSignal,\n): Promise> => {\n try {\n const response = await fetch(`${environment.publicApi}/filter/prefilling`, {\n method: 'GET',\n headers: getPubApiDefaultHeaders(deviceOutput),\n credentials: 'include',\n signal,\n });\n if (!response.ok) {\n return {};\n }\n return response.json();\n } catch {\n return {};\n }\n};\n\nexport const setPrefilling = async (\n deviceOutput: DeviceOutput,\n environment: EnvironmentUrls,\n selectedDataIncluded: number,\n signal?: AbortSignal,\n): Promise => {\n try {\n await fetch(`${environment.publicApi}/filter/prefilling`, {\n method: 'PUT',\n headers: getPubApiDefaultHeaders(deviceOutput),\n body: JSON.stringify({data_included: selectedDataIncluded}),\n credentials: 'include',\n signal,\n });\n } catch {}\n};\n","export type HostEnv = 'live' | 'test' | 'int' | 'local';\n\nexport interface EnvironmentUrls {\n publicApi: string;\n host: string;\n assetsExternal: string;\n}\n\nconst local = (): EnvironmentUrls => {\n const n = import.meta.env.VITE_LOCAL_TESTING_NUMBER ?? '1';\n const name = import.meta.env.VITE_LOCAL_NAME ?? 'local';\n return {\n publicApi: `https://pub-api${n}.${name}.handyvertrag.check24-test.de`,\n host: `https://handyvertrag${n}.${name}.handyvertrag.check24-test.de`,\n assetsExternal: `https://assets-handyvertrag${n}.${name}.handyvertrag.check24-test.de`,\n };\n};\n\nconst test: EnvironmentUrls = {\n publicApi: 'https://pub-api.handyvertrag.check24-test.de',\n host: 'https://handyvertrag.check24-test.de',\n assetsExternal: 'https://assets.handyvertrag.check24-test.de',\n};\n\nconst int: EnvironmentUrls = {\n publicApi: 'https://pub-api.handyvertrag.check24-test.de',\n host: 'https://handyvertrag.check24.de',\n assetsExternal: 'https://assets.handyvertrag.check24-test.de',\n};\n\nconst live: EnvironmentUrls = {\n publicApi: 'https://pub-api.handyvertrag.check24.de',\n host: 'https://handyvertrag.check24.de',\n assetsExternal: 'https://assets.handyvertrag.check24.de',\n};\n\nexport const resolveEnvironment = (env: HostEnv | null | undefined): EnvironmentUrls => {\n switch (env) {\n case 'local':\n return local();\n case 'test':\n return test;\n case 'int':\n return int;\n case 'live':\n default:\n return live;\n }\n};\n\n// Prefers the explicit `env` attribute value from the host; falls back to hostname\n// detection so the component behaves correctly during local development without needing\n// the hub to inject attributes.\nexport const normalizeEnv = (raw: string | null): HostEnv => {\n if (raw === 'test' || raw === 'int' || raw === 'live' || raw === 'local') return raw;\n if (typeof window !== 'undefined') {\n const host = window.location.hostname;\n if (host.endsWith('.check24-test.de')) return 'test';\n if (host.endsWith('.check24.de')) return 'live';\n }\n return 'live';\n};\n","/// \n\nimport styles from './client.scss?inline';\nimport {HomeClientComponentElement, HomeClientComponentProps, UserInfo} from '../.check24-home/types/client';\nimport {Language} from '../.check24-home/types/check24';\nimport {Navigation, setupNavigation} from './components/navigation.ts';\nimport {ShortFilter, setupShortFilter} from './components/short-filter.ts';\nimport {getPrefilling, getFilter, setPrefilling} from './configs/requests.ts';\nimport {HardwareFilterCategory, DataIncludedFilterOption, DeviceOutput} from './types/types.ts';\nimport {resolveEnvironment, normalizeEnv, EnvironmentUrls, HostEnv} from './configs/environment.ts';\nimport {cleanupHardwareOverlay, attachHardwareOverlayDismissListeners} from './components/hardware-overlay.ts';\n\ndeclare const __PHONES_DATA_URL__: string;\nconst phonesImageUrl: string = __PHONES_DATA_URL__;\n\ndeclare global {\n interface Window {\n dataLayer?: Array>;\n }\n}\n\ntype MobilfunkBundleProps = HomeClientComponentProps;\n\nexport default class MobilfunkBundleDefaultClient extends HTMLElement implements HomeClientComponentElement {\n deviceOutput: DeviceOutput = 'desktop';\n language: Language = 'de-DE';\n user?: UserInfo | undefined;\n platform: 'app' | 'web' = 'web';\n\n #shadow: ShadowRoot | null = null;\n #dataIncludedFilter: Array = [];\n #hardwareFilter: Array = [];\n\n #selectedDataIncluded = 0;\n #selectedHardware: Array = [];\n #isHardwareOverlayVisible = false;\n #isLoading = true;\n #controller = new AbortController();\n\n #env: HostEnv = 'live';\n #environment: EnvironmentUrls = resolveEnvironment('live');\n\n // Spec host attributes: product-slug, deviceoutput, language, platform, env, sso-env.\n // Also observe device-output (hyphenated) for reference/legacy host compatibility.\n // `user` is not a host attribute; it surfaces as a prop via C24Home.validateAttributes.\n static get observedAttributes(): string[] {\n return ['product-slug', 'device-output', 'deviceoutput', 'language', 'platform', 'env', 'sso-env'];\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\n if (oldValue === newValue) return;\n\n this.#applyAttributes();\n\n if (this.#shadow) {\n if (name === 'device-output' || name === 'deviceoutput' || name === 'env') {\n void this.#loadData();\n } else {\n this.#render();\n }\n }\n }\n\n async connectedCallback() {\n this.#controller = new AbortController();\n\n if (!this.#shadow) {\n this.#shadow = this.attachShadow({mode: 'closed'});\n }\n\n // Inter font must be loaded at document level — @import inside shadow DOM is not reliable\n if (!document.getElementById('mobileservice-inter-font')) {\n const link = document.createElement('link');\n link.id = 'mobileservice-inter-font';\n link.rel = 'stylesheet';\n link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap';\n document.head.appendChild(link);\n }\n\n this.#applyAttributes();\n this.#render();\n await this.#loadData();\n }\n\n disconnectedCallback(): void {\n this.#controller.abort();\n if (this.#shadow) {\n cleanupHardwareOverlay(this.#shadow);\n }\n }\n\n #applyAttributes(): void {\n if (typeof C24Home !== 'undefined' && typeof C24Home.validateAttributes === 'function') {\n try {\n const validated = C24Home.validateAttributes(this.attributes);\n const deviceOutput = this.#asString(validated.deviceOutput);\n if (\n deviceOutput === 'desktop' ||\n deviceOutput === 'mobile' ||\n deviceOutput === 'tabletapp' ||\n deviceOutput === 'app'\n ) {\n this.deviceOutput = deviceOutput;\n }\n const language = this.#asString(validated.language);\n if (language) this.language = language as Language;\n if (validated.user && typeof validated.user === 'object' && 'id' in validated.user) {\n this.user = validated.user;\n }\n const platform = this.#asString(validated.platform);\n if (platform === 'app' || platform === 'web') this.platform = platform;\n } catch {\n this.#applyRawAttributes();\n }\n } else {\n this.#applyRawAttributes();\n }\n\n this.#env = normalizeEnv(this.getAttribute('env'));\n this.#environment = resolveEnvironment(this.#env);\n }\n\n #asString(value: unknown): string | undefined {\n if (typeof value === 'string') return value;\n if (value && typeof value === 'object' && 'value' in value) {\n return (value as Attr).value;\n }\n return undefined;\n }\n\n #applyRawAttributes(): void {\n const deviceOutput = this.getAttribute('deviceoutput') ?? this.getAttribute('device-output');\n if (\n deviceOutput === 'desktop' ||\n deviceOutput === 'mobile' ||\n deviceOutput === 'tabletapp' ||\n deviceOutput === 'app'\n ) {\n this.deviceOutput = deviceOutput;\n }\n const language = this.getAttribute('language');\n if (language) this.language = language as Language;\n const platform = this.getAttribute('platform');\n if (platform === 'app' || platform === 'web') this.platform = platform;\n const userAttr = this.getAttribute('user');\n if (userAttr) {\n try {\n const parsed: unknown = JSON.parse(userAttr);\n if (\n parsed !== null &&\n typeof parsed === 'object' &&\n 'id' in parsed &&\n typeof (parsed as {id: unknown}).id === 'string'\n ) {\n this.user = parsed as UserInfo;\n }\n } catch {\n // ignore malformed user attribute\n }\n }\n }\n\n #render(): void {\n if (!this.#shadow) return;\n\n if (this.#shadow.childElementCount === 0) {\n this.#shadow.innerHTML = `\n \n
\n \n
\n \"\"\n
\n
\n
Handy mit Vertrag
\n
Top Smartphones zum Top-Preis
\n
\n
\n
\n `;\n }\n\n const searchBar = this.#shadow.getElementById('search-bar');\n if (searchBar) {\n if (this.#isLoading) {\n searchBar.innerHTML = `\n ${Navigation()}\n
\n `;\n } else {\n searchBar.innerHTML = `\n ${Navigation()}\n ${ShortFilter({\n dataIncluded: this.#dataIncludedFilter,\n selectedDataIncluded: this.#selectedDataIncluded,\n hardwareOptions: this.#hardwareFilter,\n selectedHardware: this.#selectedHardware,\n isHardwareOverlayVisible: this.#isHardwareOverlayVisible,\n environment: this.#environment,\n })}\n `;\n }\n }\n\n if (!this.#isLoading) {\n this.#setupEventListeners();\n }\n }\n\n async #loadData() {\n const {signal} = this.#controller;\n\n const prefilling = await getPrefilling(this.deviceOutput, this.#environment, signal);\n if (signal.aborted) return;\n this.#selectedDataIncluded = prefilling?.data_included ?? 0;\n\n const filter = await getFilter(this.deviceOutput, this.#environment, signal);\n if (signal.aborted) return;\n this.#dataIncludedFilter = filter.dataIncluded;\n this.#hardwareFilter = filter.hardware;\n\n this.#isLoading = false;\n this.#render();\n }\n\n #setupEventListeners(): void {\n if (!this.#shadow) return;\n setupNavigation({\n shadowRoot: this.#shadow,\n onSimOnlyClick: () => this.#track('teaser_click'),\n });\n setupShortFilter({\n shadowRoot: this.#shadow,\n clickFilterCta: () => this.#track('teaser_click'),\n dataIncludedChange: selectedValue => {\n this.#selectedDataIncluded = selectedValue;\n void setPrefilling(this.deviceOutput, this.#environment, selectedValue, this.#controller.signal);\n this.#render();\n },\n changeHardwareSelection: selectedHardware => {\n if (selectedHardware === '0') {\n this.#selectedHardware = [];\n } else if (this.#selectedHardware.includes(selectedHardware)) {\n this.#selectedHardware = this.#selectedHardware.filter(value => value !== selectedHardware);\n } else {\n this.#selectedHardware.push(selectedHardware);\n }\n\n this.#render();\n },\n openHardwareOverlay: () => {\n this.#setHardwareOverlayVisible(true);\n },\n closeHardwareOverlay: () => {\n this.#setHardwareOverlayVisible(false);\n },\n isHardwareOverlayVisible: this.#isHardwareOverlayVisible,\n });\n }\n\n // Toggle the overlay's visibility without rebuilding the search-bar DOM.\n // This matters because a full re-render would destroy the native