{children}
;\n};\n","interface Set\n
\n \n );\n};\n","import { h } from '@atomify/jsx';\n\nimport { BPDFunctionalSvg } from '../..';\n\nexport const ChipCheckbox = ({\n validationTypes,\n validationRegex,\n validationErrorMessage,\n requiredErrorMessage,\n value,\n classes,\n disabled,\n name,\n id,\n required,\n checked,\n hook,\n attr,\n label,\n icon,\n error,\n displayName,\n variant,\n hideError = false,\n collapsedLabel = false,\n}: {\n validationTypes?: string | null;\n validationRegex?: string | null;\n validationErrorMessage?: string | null;\n requiredErrorMessage?: string | null;\n value?: any;\n classes?: string;\n disabled?: boolean;\n name: string;\n id: string;\n required?: boolean;\n checked?: boolean;\n hook?: string;\n attr?: { [key: string]: string };\n label: string | Text;\n icon?: string;\n error?: string;\n srOnly?: boolean;\n displayName?: string | null;\n hideError?: boolean;\n variant?: 'small';\n collapsedLabel?: boolean;\n}) => {\n const inputClasses: Record\n
\n {!hideError && (\n \n {error}\n
\n )}\n \n {error}\n
\n )}\n \n );\n};\n\nexport const ChipRadio = ({\n validationTypes,\n validationRegex,\n validationErrorMessage,\n requiredErrorMessage,\n value,\n classes,\n disabled,\n required,\n name,\n displayName,\n hook,\n variant,\n options,\n collapsedLabel,\n}: {\n validationTypes?: string | null;\n validationRegex?: string | null;\n validationErrorMessage?: string | null;\n requiredErrorMessage?: string | null;\n value?: any;\n classes?: string;\n disabled?: boolean;\n name: string;\n required?: boolean;\n displayName?: string | null;\n variant?: 'small';\n hook?: string;\n collapsedLabel?: boolean;\n options: Array<{\n id: string;\n checked?: boolean;\n hook?: string;\n attr?: string[];\n label?: string | Text;\n value: string;\n icon?: string;\n }>;\n}) => {\n return (\n \n {options.map((option) => {\n const inputClasses: Record = {\n ['c-chip']: true,\n [`chip--${variant}`]: !!variant,\n ['chip--collapsed']: collapsedLabel,\n ['chip--icon']: !!option.icon,\n ['chip--text-only']: !option.icon,\n ['form__item']: true,\n ['form__item--disabled']: disabled,\n };\n\n return (\n
\n \n );\n};\n\nconst ChipInput = ({\n name,\n inputClasses,\n id,\n required,\n disabled,\n checked,\n value,\n attr,\n icon,\n label,\n hook,\n type,\n}: {\n name: string;\n inputClasses: Record\n
\n );\n })}\n \n
\n);\n","import { h } from '@atomify/jsx';\n\ninterface FormProps {\n hook?: string;\n action?: string;\n method?: string;\n attr?: string;\n classes?: string;\n children?: NodeList;\n}\n\nexport const FormElement = ({ hook, action, method, attr, classes, children }: FormProps) => {\n const formAttributes = { action, method, attr };\n return (\n \n
\n \n \n
\n );\n};\n","import {\n Component,\n defineElement,\n FC,\n useBindMethod,\n useElement,\n useElements,\n useEvent,\n useListen,\n} from '@atomify/hooks';\nimport { useStylesheet } from '@utilities/hooks';\n\nimport { BPDInput } from './input';\n\nexport interface BPDFormElement extends Component {\n checkValidity: () => boolean;\n validate: (toggleErrorState?: boolean) => { valid: boolean };\n serializeForm: () => { [key: string]: any };\n clearInputs: () => void;\n formData: () => FormData | null;\n formInner: HTMLFormElement;\n}\n\nconst BPDForm: FC\n {label &&
\n \n );\n};\n","import { h } from '@atomify/jsx';\n\ninterface CheckboxListProps {\n requiredErrorMessage?: string;\n required?: boolean;\n title?: string;\n children?: NodeList;\n}\n\nconst CheckboxListElement = (props: CheckboxListProps) => {\n return (\n {label}
}\n\n {options &&\n options.map((item) => (\n \n \n ))}\n
\n \n {error}\n
\n {props.children}
\n \n \n );\n};\n\nexport { CheckboxListElement };\n","import { defineElement, FC, onDidLoad, useProp } from '@atomify/hooks';\nimport { h } from '@atomify/jsx';\nimport { CountryModel, countryQuery } from '@bpd-library/utilities';\nimport { GERMANY_ID, NETHERLANDS_ID } from '@constants/countries';\nimport { useCountryPostcodeValidator, useTranslate } from '@utilities/hooks';\nimport { isGermany } from '@utilities/is-germany';\n\nimport { SelectElement, SelectOption } from '../select/select';\n\nconst SelectCountry: FC = ({ element }) => {\n const [name] = useProp\n {type === 'hidden' ? (\n
\n \n );\n};\n","import { h } from '@atomify/jsx';\n\ninterface SelectOption {\n value: string;\n label: string | Text;\n rawValue?: string;\n default?: boolean;\n selected?: boolean;\n}\n\ninterface SelectData {\n name: string;\n label: string | Text;\n id: string;\n options: SelectOption[];\n classes?: string;\n disabled?: boolean;\n readonly?: boolean;\n attr?: { [key: string]: string };\n validationTypes?: string;\n validationRegex?: string;\n validationErrorMessage?: string;\n requiredErrorMessage?: string;\n value?: string;\n sronly?: boolean;\n bpdInputHook?: string;\n hook?: string;\n required?: boolean;\n error?: string | Text;\n customSelect?: boolean;\n onOptionSelect?: (option: SelectOption) => void;\n}\n\nconst SelectElement = (data: SelectData) => {\n const preselected = data.options.some(({ selected }) => selected);\n const classes: { [key: string]: boolean } = {\n ['c-select']: true,\n ['form__item']: true,\n ['floating-label-active']: true,\n ['form__item--disabled']: !!data.disabled,\n ...(data.classes && { [data.classes]: true }),\n };\n\n const Wrapper = data.customSelect ? 'bpd-select' : 'div';\n\n return (\n \n \n\n
\n )}\n\n \n {error}\n
\n \n \n\n \n {data.options.map((option) => (\n \n {!option.default && option.label}\n \n ))}\n \n\n \n
\n\n {data.customSelect ? (\n \n
\n ) : null}\n\n - \n {data.options.map((option) => {\n if (option.default) return null;\n return (\n
\n {data.error}\n
\n \n \n
\n \n \n \n \n
\n\n {error && (\n \n {error}\n
\n )}\n \n \n \n \n
\n);\n\ndefineElement('bpd-loader', Loader);\n","import { defineElement, FC, useProp } from '@atomify/hooks';\nimport { h } from '@atomify/jsx';\nimport { Container } from '@bpd-library/components';\n\nimport { BPDFunctionalSvg } from '../svg/svg';\n\nconst BPDBackLink: FC = () => {\n const [text] = useProp\n
\n\n {text}
\n \n
\n ) : (\n \n
\n \n {fullName}\n {email}\n handleGtm({ eventLabel: 'settings' })}\n />\n
\n - \n {links.map(({ url, label, gtmLabel }) => (\n
- \n handleGtm({ eventLabel: gtmLabel })}>\n {label}\n \n \n ))}\n
- \n
- \n \n {useTranslate('My')} {window.__ENVIRONMENT_DETAILS__.areaProjectName}\n \n \n
- \n \n {fullName}\n {email}\n \n \n
- \n \n
\n {useTranslate('Account')}\n \n \n \n
\n {title}\n
\n{description}
\n\n \n {dismissButtonText}\n \n \n {confirmButtonText}\n \n
\n \n );\n};\n\nModalCloseConfirmationPopup.props = {\n modalId: {\n type: String,\n required: true,\n },\n onConfirm: {\n type: Function,\n required: true,\n },\n onDismiss: {\n type: Function,\n required: true,\n },\n title: {\n type: Text,\n },\n description: {\n type: Text,\n reflectToAttr: true,\n },\n confirmButtonText: {\n type: Text,\n },\n dismissButtonText: {\n type: Text,\n },\n};\n\ndefineElement('modal-close-confirmation-popup', ModalCloseConfirmationPopup);\n","import { defineElement, FC, onDidLoad, onDidUnload, useElement, useEvent } from '@atomify/hooks';\nimport { inviewObserver } from '@source/utilities/inview';\nimport { useStylesheet } from '@utilities/hooks';\n\nimport style from './inview-container.scss';\nimport { InviewIndicatorElement } from './inview-indicator';\n\nexport const INVIEW_CLASS = 'is--in-view';\nexport const INVIEW_HOOK = 'js-hook-inview-item';\n\nexport interface InviewContainerElement extends HTMLElement {}\n\nconst InviewContainer: FC\n {\n closeModal(id);\n }}\n onDismiss={() => {\n dismissCloseModal(id);\n }}\n />\n )}\n\n \n {!!title &&
\n \n {title}
}\n {children}\n{children}
\n);\n\ninterface SingleColumnRowInterface extends RowInterface {\n cols?: (number | undefined)[];\n}\n\nexport const SingleColumnRow = ({ extraClass = '', cols, children }: SingleColumnRowInterface) => (\n \n {data.label &&
\n\n {data.label}
}\n{data.children}
\n\n {data.buttonLabel && data.buttonLink && (\n \n ({\n label: `${name} - ${id}`,\n value: id,\n }))}\n />\n \n
,\n );\n }\n }\n\n function resetBPDTools() {\n resetState();\n window.location.reload();\n }\n\n return (\n \n );\n};\n\ndefineElement('bpd-development-overlay', BPDGridOverlay);\n","import { Component, QueryAll } from '@atomify/core';\nimport { GTMPush } from '@utilities/gtm';\nimport { isMobile, useMedia } from '@utilities/media-query';\n\ninterface Sub {\n trigger: HTMLElement;\n element: HTMLElement;\n inner: HTMLElement;\n height?: number;\n isOpen: boolean;\n}\n\n@Component({\n tag: 'bpd-navigation',\n})\nexport class BPDNavigation extends HTMLElement {\n @QueryAll('[js-hook-navigation-sub-trigger]') subTriggers: HTMLElement[];\n @QueryAll('[js-hook-navigation-link-item]') links: HTMLElement[];\n\n subs: Sub[] = [];\n\n componentDidRender() {\n this.subs = this.getSubs();\n\n useMedia(({ tabletLandscape, tabletPortrait }) => {\n if (tabletLandscape || tabletPortrait) {\n this.setSubsHeight(this.subs);\n this.subs.forEach((sub) => this.closeSub(sub));\n }\n });\n\n this.bindSubMenuTriggerEvents();\n this.bindGTMEvents();\n }\n\n bindSubMenuTriggerEvents() {\n this.subs.forEach((sub) => {\n sub.trigger.addEventListener('mouseenter', () => this.handleMouseenter(sub));\n sub.trigger.addEventListener('mouseleave', () => this.handleMouseleave(sub));\n sub.trigger.addEventListener('click', (e) => this.handleTriggerClick(e, sub));\n });\n }\n\n handleMouseenter(sub: Sub) {\n if (!isMobile()) this.openSub(sub);\n }\n\n handleMouseleave(sub: Sub) {\n if (!isMobile()) this.closeSub(sub);\n }\n\n handleTriggerClick(_: Event, sub: Sub) {\n if (isMobile()) {\n this.closeOtherSubs(sub);\n sub.isOpen ? this.closeSub(sub) : this.openSub(sub);\n }\n }\n\n openSub(sub: Sub) {\n if (sub.element) {\n sub.element.style.maxHeight = `${sub.height}px`;\n sub.isOpen = true;\n }\n }\n\n closeSub(sub: Sub) {\n if (sub.element) {\n sub.element.style.maxHeight = `0px`;\n sub.isOpen = false;\n }\n }\n\n closeOtherSubs(sub: Sub) {\n this.subs.forEach((otherSub) => {\n if (otherSub !== sub) this.closeSub(otherSub);\n });\n }\n\n getSubs() {\n const subs = [...this.subTriggers].map((trigger) => {\n const sub: Sub = {\n trigger,\n element: trigger.querySelector('[js-hook-navigation-sub]') as HTMLElement,\n inner: trigger.querySelector('[js-hook-navigation-sub-inner]') as HTMLElement,\n isOpen: false,\n };\n\n return sub;\n });\n\n this.setSubsHeight(subs);\n\n return subs;\n }\n\n setSubsHeight(subs: Sub[]) {\n subs.forEach((sub) => {\n const innerHeight = sub.inner.getBoundingClientRect().height;\n const innerStyles = window.getComputedStyle(sub.inner);\n const innerMargin =\n parseInt(innerStyles.marginTop) + parseInt(innerStyles.marginBottom);\n\n sub.height = innerHeight + innerMargin;\n });\n }\n\n bindGTMEvents() {\n [...this.links].forEach((item) => {\n const menuLink = item.querySelector\n \n {userInfo?.avatar && (\n \n 
\n \n )}\n\n {userInfo?.initials && !userInfo.avatar && (\n \n )}\n\n {!userInfo?.avatar && !userInfo?.initials && (\n \n \n\n \n \n )}\n \n\n {isLoggedIn() && (\n \n )}\n
,\n );\n }\n};\n\nProfileButton.props = {\n useMehNavigation: { type: Boolean }, // feature flag\n mijnHomeUrl: { type: String },\n mijnAccountUrl: { type: String },\n accountNavigationLinks: { type: String },\n};\n\ndefineElement('bpd-profile-button', ProfileButton);\n","import { Component } from '@atomify/core';\nimport { h } from '@atomify/jsx';\nimport { closeModal } from '@store/modals';\nimport { isLocalhost } from '@utilities/sw';\n\nimport style from './login-screen.scss';\n\nconst USER_LOGIN_MODAL_ID = 'login-screen';\n\nexport interface LoginScreenInterface extends HTMLElement {\n closeAndRemove: Function;\n}\n\n@Component({\n tag: 'bpd-login-screen',\n style,\n})\nexport class BPDLoginScreen extends HTMLElement {\n popupWindow: null | WindowProxy = null;\n\n get iframeSrc() {\n if (isLocalhost) {\n return 'https://hoefenhaag.u8projects.bpdtest.nl/umbraco/surface/saml/authrequest?host=hoefenhaag.u8projects.bpdtest.nl&id=a0iw0000008QvIVAA0&protocol=https';\n }\n\n const hostname = window.location.hostname;\n const areaId = window.__ENVIRONMENT_DETAILS__.areaId;\n\n return `/umbraco/surface/saml/authrequest?host=${hostname}&id=${areaId}&protocol=https`;\n }\n\n get isMobile() {\n return /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(navigator.appVersion);\n }\n\n get isSafari() {\n const userAgent = navigator.userAgent.match(\n /(opera|chrome|safari|firefox|msie)\\/?\\s*(\\.?\\d+(\\.\\d+)*)/i,\n );\n\n if (!userAgent) return false;\n\n const browser = userAgent[1].toLowerCase();\n\n return browser === 'safari';\n }\n\n get type() {\n return this.popupWindow ? 'popup' : 'modal';\n }\n\n private openPopup() {\n const width = 900;\n const height = 475;\n const left = window.screen.width / 2 - (width / 2 + 10);\n const top = window.screen.height / 2 - (height / 2 + 50);\n\n return window.open(\n this.iframeSrc,\n 'Login',\n `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`,\n );\n }\n\n public closeAndRemove() {\n switch (this.type) {\n case 'popup':\n this.popupWindow?.close();\n this.remove();\n break;\n case 'modal':\n closeModal(USER_LOGIN_MODAL_ID);\n this.remove();\n break;\n }\n }\n\n render() {\n if (this.isSafari) {\n this.popupWindow = this.isMobile ? window.open(this.iframeSrc) : this.openPopup();\n\n return '';\n }\n\n return (\n \n
\n );\n }\n}\n","import { Component, Listen, Query } from '@atomify/core';\nimport { debounce } from '@bpd-library/utilities';\nimport { elements } from '@source/utilities/dom';\n\nconst CTA_ACTIVE_CLASS = 'house-characteristics-cta-bar--is-active';\nconst CTA_BODY_CLASS = 'has--house-characteristics-cta-bar';\n\n@Component({\n tag: 'bpd-house-characteristics-cta-bar',\n})\nexport class HouseCharacteristicsCtaBar extends HTMLElement {\n @Query('[js-hook-characteristics-section]', document) characteristicsSection: HTMLElement;\n\n @Listen('scroll', { target: window })\n onScroll() {\n debounce(() => {\n this.setActiveClass();\n }, 200)();\n }\n\n componentDidLoad() {\n this.setBodyClass();\n this.setActiveClass();\n }\n\n setBodyClass() {\n elements.body.classList.add(CTA_BODY_CLASS);\n }\n\n setActiveClass() {\n const action =\n window.pageYOffset >\n this.characteristicsSection.offsetTop + this.characteristicsSection.clientHeight\n ? 'add'\n : 'remove';\n this.classList[action](CTA_ACTIVE_CLASS);\n\n elements.body.classList[action](CTA_ACTIVE_CLASS);\n }\n}\n","import '@features/compare/components/compare-button/compare-button';\n\nimport { defineElement, FC, useBindMethod, useProp } from '@atomify/hooks';\nimport { h } from '@atomify/jsx';\nimport { ButtonRoundA } from '@atoms/button-round/button-round';\nimport { Image } from '@atoms/image/image';\nimport {\n COLOR_CLASSES,\n FormattedPrice,\n FormattedSpecification,\n FormattedStatus,\n} from '@source/utilities/api-formatters';\nimport { useStylesheet } from '@utilities/hooks';\n\nimport style from './construction-number-card.scss';\n\nconst HIGHLIGHTED_CLASS = 'construction-number-card--highlighted';\n\nexport interface ConstructionNumberCardElement extends HTMLElement {\n setHighlighted: () => void;\n unsetHighlighted: () => void;\n}\n\nconst ConstructionNumberCard: FC\n
\n \n
\n\n \n
\n\n \n \n
\n\n \n
\n\n \n {status && (\n \n {status.label}\n \n )}\n
\n {debugId && {debugId}}\n {compare && {houseName}
\n {price && price.amount && !hidePrice && (\n \n {price.prefix && price.prefix} {price.amount && price.amount}{' '}\n {price.suffix && price.suffix}\n {isNhg && (\n NHG\n )}\n \n )}\n- \n {specs.map((spec) => (\n
- \n {spec.value} {spec.suffix}\n \n ))}\n
\n {window.__ENVIRONMENT_DETAILS__.hasWishlist && (\n
\n \n );\n};\n\nConstructionNumberCard.props = {\n id: { type: String },\n houseName: { type: String },\n wishlistItemCount: { type: Number },\n href: { type: String },\n price: { type: Object },\n image: { type: Object, required: true },\n specs: { type: Array },\n shoppingCartUrl: { type: String },\n classes: { type: String },\n status: { type: Object },\n compare: { type: Boolean },\n hidePrice: { type: Boolean },\n isNhg: { type: Boolean },\n debugId: { type: String },\n};\n\ndefineElement('bpd-construction-number-card', ConstructionNumberCard);\n","import { defineElement, FC, onDidLoad, useElement } from '@atomify/hooks';\nimport { getUserWishlist, userStore } from '@store/user';\n\nconst HIGHLIGHTED_CLASS = 'header-wishlist-button--highlighted';\n\nconst HeaderWishlistButton: FC = ({ element }) => {\n const wishlistTotal = useElement\n
\n )}\n {shoppingCartUrl && (\n \n
\n )}\n \n
\n\n \n {this.images.length >= 5 ? (\n \n \n ) : (\n this.images.map((image, i) => (\n this.openModal(i)}\n {...this.getGridItemProps()}\n />\n ))\n )}\n
\n\n {this.images.length > 5 && (\n \n this.openModal(0)}\n />\n
\n \n {[...this.images].splice(1, 4).map((image, i) => (\n this.openModal(i + 1)}\n />\n ))}\n
\n \n this.openModal()}\n />\n
\n )}\n \n \n {ctaLabel}\n \n
\n ) : null;\n};\n\nexport { HotjarSurveyBlock };\n","import { defineElement, FC, useElement, useProp } from '@atomify/hooks';\nimport { h } from '@atomify/jsx';\nimport { Button, ButtonInterface } from '@source/components/atoms/button/button';\n\ntype ButtonToggleType = 'toggle' | 'switch';\ntype ButtonToggleDirection = 'row' | 'column';\n\nconst TOGGLE_ON_CLASS = 'button-toggle--on';\nconst TOGGLE_OFF_CLASS = 'button-toggle--off';\n\nconst ButtonToggle: FC = () => {\n const [type] = useProp{intro}
\n\n \n \n
\n );\n};\n\nButtonToggle.props = {\n type: {\n type: String,\n reflectToAttr: true,\n },\n direction: {\n type: String,\n reflectToAttr: true,\n },\n toggleOn: {\n type: Object,\n required: true,\n },\n toggleOff: {\n type: Object,\n required: true,\n },\n classes: {\n type: String,\n reflectToAttr: true,\n },\n onClick: {\n type: Function,\n },\n isToggleOn: {\n type: Boolean,\n reflectToAttr: true,\n },\n};\n\ndefineElement('button-toggle', ButtonToggle);\n","import {\n defineElement,\n FC,\n onDidLoad,\n useBindMethod,\n useElement,\n useElements,\n useListen,\n useProp,\n} from '@atomify/hooks';\nimport { Fragment, h } from '@atomify/jsx';\nimport { Image } from '@atoms/image/image';\nimport { ButtonRound } from '@source/components/atoms/button-round/button-round';\nimport { ImageSettings } from '@source/components/atoms/image/utilities/image';\n\nexport interface ZoomImageInterface {\n zoomIn: Function;\n zoomOut: Function;\n}\n\ninterface Size {\n width: number;\n height: number;\n}\n\ninterface Distance {\n x: number;\n y: number;\n}\n\ninterface Setting {\n elementBounds?: ClientRect;\n diff?: Size;\n zoomedSize?: Size;\n zoomLevel: number;\n}\n\nconst ZOOMED_CLASS = 'zoom-image--zoomed';\n\nconst MIN_ZOOM_LEVEL = 2;\nconst MAX_ZOOM_LEVEL = 4;\nconst ZOOM_STEP = 1;\n\nconst ZoomImage: FC = ({ element }) => {\n const [settings] = useProp