{"version":3,"file":"ip.web-components.bundle.js","mappings":"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","sources":["webpack://industrienspension/./IP.Mockup/js/web-components/ip-slider-web-component.ts","webpack://industrienspension/webpack/bootstrap","webpack://industrienspension/./IP.Mockup/js/web-components/ip-web-component.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/number-slider.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/timeline-constants.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/timeline-wrapper-large-year.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/TimelineComponentHelper.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/text-image-slide.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/citation-slide.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/full-image-slide.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/statistic-container.ts","webpack://industrienspension/./IP.Mockup/js/func/timeline/statistic-value.ts"],"sourcesContent":["interface ElementInternals {\n    reportValidity(): boolean;\n    checkValidity(): boolean;\n    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined, anchor?: HTMLElement | undefined): void\n}\n\ninterface ValidityStateFlags {\n    badInput?: boolean;\n    customError?: boolean;\n    patternMismatch?: boolean;\n    rangeOverflow?: boolean;\n    rangeUnderflow?: boolean;\n    stepMismatch?: boolean;\n    tooLong?: boolean;\n    tooShort?: boolean;\n    typeMismatch?: boolean;\n    valueMissing?: boolean;\n}\n\n\nclass IPSlider extends HTMLElement {\n    #internals : ElementInternals;\n    #shadow : ShadowRoot;\n\n    constructor() {\n        super();\n        this.#shadow = this.attachShadow({ mode: 'open' });\n        this.#internals = this.attachInternals();\n    }\n\n    static get formAssociated() {\n        return true;\n    }\n\n    static get observedAttributes() {\n        return ['step', 'value', 'min', 'max', 'required', 'slide-color', 'hide-value-holder', 'auto-apply-limits'];\n    }\n\n    connectedCallback() : void {\n        this.#internals.ariaValueNow = this.value;\n        this.#internals.ariaValueMin = this.min;\n        this.#internals.ariaValueMax = this.max;\n        this.#internals.ariaRequired = this.required;\n\n        this.#Render();\n\n        this.#attachEvents();\n        this.#updateBackgroundColor(this.#shadow.querySelector('.slider')!, null);\n    }\n\n\n    // #region getters and setters\n\n    get sliderHeight() : string {\n        return this.getAttribute('slider-height') ?? '5px';\n    }\n\n    set sliderHeiught(value : string | null) {\n        this.setAttribute('slider-height', value ?? '5px');\n    }\n\n    get valueHolderWidth() : string {\n        return this.getAttribute('value-holder-width') ?? '55px';\n    }\n\n    set valueHolderWidth(value : string | null) {\n        this.setAttribute('value-holder-width', value ?? '55px');\n    }\n\n    get valueHolderHeight() : string {\n        return this.getAttribute('value-holder-height') ?? '55px';\n    }\n\n    set valueHolderHeight(value : string | null) {\n        this.setAttribute('value-holder-height', value ?? '55px');\n    }\n\n    get overflowErrMsg() :string {\n        return this.getAttribute('overflow-err-msg') ?? 'Værdien er for høj';\n    }\n\n    set overflowErrMsg(value : string | null) {\n        this.setAttribute('overflow-err-msg', value ?? 'Værdien er for høj');\n    }\n\n    get underflowErrMsg() : string {\n        return this.getAttribute('underflow-err-msg') ?? 'Værdien er for lav';\n    }\n\n    set underflowErrMsg(value : string | null) {\n        this.setAttribute('underflow-err-msg', value ?? 'Værdien er for lav');\n    }\n\n    get invalidErrMsg() : string {\n        return this.getAttribute('invalid-err-msg') ?? 'Værdien er ikke gyldig';\n    }\n\n    set invalidErrMsg(value : string | null) {\n        this.setAttribute('invalid-err-msg', value ?? 'Værdien er ikke gyldig');\n    }\n\n    get checkValidity() : boolean {\n        return this.#internals.checkValidity();\n    }\n\n    get autoApplyLimits() : boolean {\n        return this.getAttribute('auto-apply-limits')?.toLowerCase() === 'true';\n    }\n\n    set autoApplyLimits(value : boolean) {\n        this.setAttribute('auto-apply-limits', value?.toString() ?? '');\n    }\n\n    get hideValueHolder() : boolean {\n        return this.getAttribute('hide-value-holder')?.toLowerCase() === 'true';\n    }\n\n    set hideValueHolder(value : boolean) {\n        this.setAttribute('hide-value-holder', value?.toString() ?? '');\n    }\n\n    get slideColor() {\n        const defaultColor = '#00b200';\n        return this.getAttribute('slide-color') ?? defaultColor;\n    }\n\n    set slideColor(value : string) {\n        this.setAttribute('slide-color', value ?? '');\n    }\n\n    get step() {\n        return this.getAttribute('step');\n    }\n\n    set step(value : string | null) {\n        this.setAttribute('step', value ?? '1');\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    set value(value : string | null) {\n        this.setAttribute('value', value ?? '');\n        this.#internals.setFormValue(value);\n    }\n\n    get min() {\n        return this.getAttribute('min');\n    }\n\n    set min(value : string | null) {\n        this.setAttribute('min', value ?? '');\n        this.#internals.ariaValueMin = value;\n    }\n\n    get max() {\n        return this.getAttribute('max');\n    }\n\n    set max(value : string | null) {\n        this.setAttribute('max', value ?? '');\n        this.#internals.ariaValueMax = value;\n    }\n\n    get required() {\n        return this.getAttribute('required');\n    }\n\n    set required(value : string | null) {\n        this.setAttribute('required', value ?? '');\n        this.#internals.ariaRequired = value;\n    }\n    // #endregion\n\n    #updateSliderValue(id : string) : void {\n        const isSlider = id === 'slider';\n        const slider = this.#shadow.querySelector<HTMLInputElement>('#slider')!;\n        const sliderValueHolder = this.#shadow.querySelector<HTMLInputElement>('#sliderValue')!;\n        const value = isSlider ? slider?.value : sliderValueHolder?.value;\n\n        this.value = value?.toString();\n        this.#setValdiation(value);\n\n        this.#updateBackgroundColor(slider, value);\n\n        // sync slider and value holder\n        if (isSlider) {\n            sliderValueHolder.value = value.toString();\n        } else if (value) {\n            slider.value = value.toString();\n        }\n        this.#internals.ariaValueNow = value;\n\n        if (this.autoApplyLimits){\n            this.#applyNumberFieldLimits(sliderValueHolder);\n        }\n    }\n\n    #applyNumberFieldLimits(elm : HTMLInputElement) : void {\n        const value = parseInt(elm.value, 10);\n        const min = parseInt(elm.min, 10);\n        const max = parseInt(elm.max, 10);\n\n        const isSmallerThanMin = value < min;\n        const isLargerThanMax = value > max;\n\n        if (isSmallerThanMin) {\n            elm.value = elm.min;\n            this.value = elm.min;\n            this.ariaValueNow = elm.min;\n        }\n        if (isLargerThanMax) {\n            elm.value = elm.max;\n            this.value = elm.min;\n            this.ariaValueNow = elm.min;\n        }\n        if (!value) {\n            elm.value = elm.min;\n            this.value = elm.min;\n            this.ariaValueNow = elm.min;\n        }\n    }\n\n    #attachEvents() : void {\n        const slider = this.#shadow.querySelector<HTMLInputElement>('#slider')!;\n        const sliderValueHolder = this.#shadow.querySelector<HTMLInputElement>('#sliderValue')!;\n\n        slider.addEventListener('input', () => {\n            this.#updateSliderValue(slider.id);\n            this.dispatchEvent(new Event('input'));\n        });\n\n        slider.addEventListener('change', () => {\n            this.dispatchEvent(new Event('change'));\n        });\n\n        if (sliderValueHolder.style.display !== 'none') {\n            sliderValueHolder.addEventListener('change', () => {\n                this.#updateSliderValue(sliderValueHolder.id);\n            });\n        }\n    }\n\n    #updateBackgroundColor(elm : HTMLInputElement, value : string | null) : void {\n        const min = parseInt(elm.min, 10);\n        const max = parseInt(elm.max, 10);\n        const _value = value ? parseInt(value, 10) : parseInt(elm.value, 10);\n\n        const percentage = ((_value - min) / (max - min)) * 100;\n\n        const backgroundColor = `linear-gradient(to right, ${this.slideColor} 0%, ${this.slideColor} ${percentage}%, #ccc ${percentage}%, #ccc 100%)`;\n\n        // Apply the background color to the slider\n        elm.style.background = backgroundColor;\n    }\n\n    #setValdiation( newValue : string | null) : void {\n        const min = parseInt(this.min ?? '', 10);\n        const max = parseInt(this.max ?? '', 10);\n        const value = parseInt(newValue ?? '', 10);\n\n        if (isNaN(value)) {\n            this.#internals.setValidity({valueMissing: true}, this.invalidErrMsg);\n        } else if (!isNaN(min) && value < min) {\n            this.#internals.setValidity({rangeUnderflow: true}, this.underflowErrMsg);\n        } else if (!isNaN(max) && value > max ) {\n            this.#internals.setValidity({rangeOverflow: true}, this.overflowErrMsg);\n        } else {\n            this.#internals.setValidity({valueMissing: false, rangeOverflow: false, rangeUnderflow: false}, '');\n        }\n        this.#internals.reportValidity();\n    }\n\n    #Render() : void {\n        const html = `\n                    <input class=\"slider\" type=\"range\" min=\"${this.min}\" max=\"${this.max}\" value=\"${this.#internals.ariaValueNow}\" step='${this.step}' ${this.#internals.ariaRequired ? \"required='true'\" : ''} id=\"slider\" >\n                    <input ${this.hideValueHolder ? 'hidden' : ''} class=\"slider-label\" type=\"number\" min=\"${this.#internals.ariaValueMin}\"\n                     max=\"${this.#internals.ariaValueMax}\" value=\"${this.#internals.ariaValueNow}\" step='${this.step}' ${this.#internals.ariaRequired ? \"required='true'\" : ''} id=\"sliderValue\">\n                    `;\n\n        const style = `\n                <style>\n                    .slider {\n                        width: 100%;\n                        height: ${this.sliderHeight};\n                        border-radius: 25px;\n                        background: #ccc;\n                        cursor: pointer;\n                        align-self: center;\n                        appearance: none;\n                    }\n\n                    .slider-label {\n                        margin-left: 10px;\n                        width: ${this.valueHolderWidth};\n                        height: 25px;\n                        align-self: center;\n                        border: 1px solid grey;\n                        text-align: right;\n                        border-radius: 2px;\n                    }\n                    .slider-label:invalid {\n                        margin-left: 10px;\n                        width: ${this.valueHolderWidth};\n                        height: 25px;\n                        align-self: center;\n                        border: 2px solid red;\n                        border-radius: 2px;\n                    }\n                    .slider-label:focus {\n                        margin-left: 10px;\n                        width: ${this.valueHolderWidth};\n                        height: 25px;\n                        align-self: center;\n                        border: 1px solid black;\n                        border-radius: 2px;\n                    }\n\n                    .slider::-webkit-slider-thumb {\n                        -webkit-appearance: none;\n                        height: 22px;\n                        width: 22px;\n                        border: 6px solid #ffffff;\n                        border-radius: 100%;\n                        background: #efefef;\n                        cursor: pointer;\n                        position: relative;\n                        filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));\n                    }\n                    .slider::-moz-range-thumb {\n                        height: 10px;\n                        width: 10px;\n                        border: 6px solid #ffffff;\n                        border-radius: 100%;\n                        background: #efefef;\n                        cursor: pointer;\n                        position: relative;\n                        filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));\n                    }\n                </style>`;\n\n\n\n\n        // Create an element inside the shadow DOM\n        const div = document.createElement('div');\n        div.style.display = 'flex';\n        div.style.alignContent = 'center';\n        div.style.width = '100%';\n        div.innerHTML = html + style;\n        this.#shadow.appendChild(div);\n    }\n\n}\ncustomElements.define('ip-slider', IPSlider);\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","export class IpWebComponent extends HTMLElement {\n    constructor(templateNode: HTMLTemplateElement) {\n        super();\n        this.attachShadow({ mode: 'open' });\n        this.shadowRoot?.appendChild(templateNode.content.cloneNode(true));\n    }\n\n    protected getProp<T extends string | undefined>(attributeName: string, defaultValue?: T) {\n        const result = this.getAttribute(attributeName) ?? defaultValue;\n        return result as T extends string ? string : string | undefined;\n    }\n\n    protected getPropAsNumber<T extends number | undefined>(attributeName: string, defaultValue?: T) {\n        const attr = this.getAttribute(attributeName);\n        const result = attr ? Number.parseFloat(attr) : defaultValue;\n        return result as T extends number ? number : number | undefined;\n    }\n\n    protected getPropAsBoolean<T extends boolean | undefined>(attributeName: string, defaultValue?: T) {\n        const attr = this.getAttribute(attributeName);\n        const result = attr ? attr.toLowerCase() === 'true' : defaultValue ?? null;\n        return result as T extends boolean ? boolean : boolean | undefined;\n    }\n\n    protected query<T extends Element>(selector: string) {\n        return (this.shadowRoot?.querySelector(selector) ?? null) as T | null;\n    }\n\n    /**\n     * This function is unsafe, as it will throw an error if the element is not found.\n     * Use this, if you are sure the element is there to avoid the null check.\n     * @param selector\n     * @returns\n     */\n    protected queryUnsafe<T extends Element>(selector: string) {\n        const elm = this.shadowRoot?.querySelector(selector);\n        if (!elm) {\n            throw new Error(`Element with selector \"${selector}\" not found.`);\n        }\n        return elm as T;\n    }\n\n    protected queryAll<T extends Element>(selector: string) {\n        const res = this.shadowRoot?.querySelectorAll(selector);\n        return res ? ([...res] as T[]) : [];\n    }\n\n    protected queryById<T extends Element>(id: string) {\n        return (this.shadowRoot?.getElementById(id) ?? null) as T | null;\n    }\n\n    /**\n     * Takes the value of the prop and sets it as the innerText of the element.\n     * @param selector The selector of the element to set the content of. It uses queryUnsafe, so it will throw an error if the element is not found.\n     * @param attributeName The name of the prop attribute to get the value from.\n     * @param defaultValue The default value to use if the prop is not set.\n     */\n    protected setContentFromProp<T extends string | undefined>(\n        selector: string,\n        attributeName: string,\n        defaultValue?: T\n    ) {\n        const elm = this.queryUnsafe<HTMLElement>(selector);\n        const content = this.getProp(attributeName, defaultValue);\n        if (content) {\n            elm.innerText = content;\n        }\n    }\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\n\nconst numberSlider = document.createElement('template');\nnumberSlider.innerHTML = `\n<style>\n    :host {\n        height: inherit;\n        --slider-val: 0em;\n    }\n    .slider {\n        height: inherit;\n        overflow: hidden;\n    }\n    .number-group {\n        height: inherit;\n        transform: translateY(var(--slider-val));\n    }\n    .number-group-animated {\n        transition: transform 2s ease-in-out;\n    }\n    .number {\n        line-height: 1;\n    }\n</style>\n<div class=\"slider\">\n    <div class=\"number-group\">\n        <div class=\"number\">0</div>\n        <div class=\"number\">1</div>\n        <div class=\"number\">2</div>\n        <div class=\"number\">3</div>\n        <div class=\"number\">4</div>\n        <div class=\"number\">5</div>\n        <div class=\"number\">6</div>\n        <div class=\"number\">7</div>\n        <div class=\"number\">8</div>\n        <div class=\"number\">9</div>\n    </div>\n</div>\n`;\n\nclass NumberSlider extends IpWebComponent {\n    private numberGroupElm: HTMLElement | null = null;\n    private curNum: number = 0;\n\n    constructor() {\n        super(numberSlider);\n    }\n\n    // Init component.\n    connectedCallback() {\n        // Set initial values.\n        const initNumber = this.getPropAsNumber('init-number', 0);\n        this.curNum = initNumber;\n        this.numberGroupElm = this.queryUnsafe<HTMLElement>('.number-group');\n        this.numberGroupElm.style.setProperty('--slider-val', `${this.curNum * -1}em`);\n    }\n\n    static get observedAttributes() {\n        return ['init-number', 'number'];\n    }\n\n    attributeChangedCallback(name, _oldValue, newValue) {\n        if (name === 'init-number') {\n            this.curNum = parseInt(newValue, 10);\n            this.numberGroupElm?.style.setProperty('--slider-val', `${this.curNum * -1}em`);\n        }\n        if (name === 'number') {\n            const targetNum = parseInt(newValue, 10);\n            this.startAnimation(targetNum);\n        }\n    }\n\n    startAnimation(animateToNumber: number) {\n        if (this.curNum === animateToNumber) {\n            return;\n        }\n\n        const numberGroup = this.queryUnsafe<HTMLElement>('.number-group');\n        numberGroup.classList.add('number-group-animated');\n        numberGroup.style.setProperty('--slider-val', `${animateToNumber * -1}em`);\n        this.curNum = animateToNumber;\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('number-slider') === undefined) {\n    customElements.define('number-slider', NumberSlider);\n}\n","export const TIMELINE_EVENT_SLIDE_YEAR_CHANGE = 'on-timeline-slide-year-change';\n","import { IpWebComponent } from '../../web-components/ip-web-component';\nimport { TIMELINE_EVENT_SLIDE_YEAR_CHANGE } from './timeline-constants';\n\nconst TimelineWrapperLargeYearTemplate = document.createElement('template');\nTimelineWrapperLargeYearTemplate.innerHTML = `\n<style>\n    :host {\n        --slide-year-min-height: 60vh;\n        --year-font-size: 20rem;\n        --font-color-title: rgba(0, 0, 0, 0.5);\n        --slide-gap: 50px;\n    }\n    .timeline-wrapper {\n        position: relative;\n    }\n    .slide-wrapper {\n        z-index: 5;\n        position: sticky;\n        top: 0px;\n        min-height: var(--slide-year-min-height);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n    .year {\n        text-align: center;\n        width: 100%;\n        height: var(--year-font-size);\n        font-size: var(--year-font-size);\n        display: flex;\n        justify-content: center;\n        color: var(--theme-primary-color);\n        transform: scale(1.1);\n\n        animation: init-animation-year 2s;\n        animation-fill-mode: forwards;\n        animation-delay: .5s;\n        transition: color 0.2s;\n    }\n    .timeline-title {\n        position: absolute;\n        width: 100%;\n        text-align: center;\n        top: calc(var(--slide-year-min-height) / 2 + var(--year-font-size) / 2);\n        font-size: calc(var(--year-font-size) / 5);\n        margin: 1rem 0 0;\n        opacity: 0;\n        color: var(--font-color-title);\n\n        animation: init-animation-title 2s;\n        animation-fill-mode: forwards;\n        animation-delay: .5s;\n    }\n    .slides-container {\n        position: relative;\n        z-index: 10;\n    }\n\n    slot {\n        display: flex;\n        flex-direction: column;\n        gap: var(--slide-gap);\n    }\n\n    @media(max-width: 768px) {\n        :host {\n            --header-font-size: 1.8rem;\n            --text-box-width: 50%;\n            --slide-year-min-height: 500px;\n            --year-font-size: 13rem;\n        }\n    }\n\n    @media(max-width: 576px) {\n        :host {\n            --header-font-size: 1.6rem;\n            --text-box-width: 100%;\n            --slide-year-min-height: 400px;\n            --year-font-size: 8rem;\n        }\n    }\n\n    @keyframes init-animation-year {\n        0% {\n            transform: scale(1.1);\n        }\n        20% {\n            transform: scale(1.2);\n        }\n        100% {\n            transform: scale(1);\n        }\n    }\n\n    @keyframes init-animation-title {\n        0% {\n            opacity: 0;\n            transform: scale(0.9);\n        }\n        100% {\n            opacity: 1;\n            transform: scale(1);\n        }\n    }\n</style>\n<div class=\"timeline-wrapper\">\n    <div class=\"slide-wrapper\">\n        <div class=\"year\">\n            <number-slider number=0></number-slider>\n            <number-slider number=0></number-slider>\n            <number-slider number=0></number-slider>\n            <number-slider number=0></number-slider>\n        </div>\n    </div>\n    <h1 class=\"timeline-title\"></h1>\n    <div class=\"slides-container\">\n        <slot></slot>\n    </div>\n</div>\n`;\n\nclass TimelineWrapperLargeYear extends IpWebComponent {\n    private unregisterAnimation: () => void = () => {};\n    private numbers: HTMLElement[] = [];\n\n    constructor() {\n        super(TimelineWrapperLargeYearTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        // Find number elements.\n        this.numbers = this.queryAll<HTMLElement>('number-slider');\n\n        // Set init year content.\n        const today = new Date(); // Start year out with \"this year\".\n        this.setInitYear(today.getFullYear().toString());\n\n        const animatedElmsInShadow = this.queryAll<HTMLElement>('.year');\n        this.unregisterAnimation = this.startYearAnimOnEnterScreen(animatedElmsInShadow as HTMLElement[]);\n\n        // Setup title content.\n        const title = this.getAttribute('title');\n        if (title) {\n            const titleElm = this.queryUnsafe<HTMLElement>('.timeline-title');\n            titleElm.textContent = title;\n        }\n\n        // Setup event listener for year change.\n        const timelineWrapperElm = this.queryUnsafe<HTMLElement>('.timeline-wrapper');\n        timelineWrapperElm.addEventListener(TIMELINE_EVENT_SLIDE_YEAR_CHANGE, (e) => {\n            const slideYearEvent = e as CustomEvent<string>;\n            this.setYear(slideYearEvent.detail);\n        });\n\n        // Setup timeline wrapper.\n        this.setupTimelineWrapper(timelineWrapperElm);\n\n        // Setup colour change of year on scroll.\n        this.setupYearColorInterpolation(this.queryUnsafe<HTMLElement>('.slide-wrapper'));\n    }\n\n    disconnectedCallback() {\n        this.unregisterAnimation();\n    }\n\n    /** Sets up the wrapper for all slides, for instance the gap between slides. */\n    setupTimelineWrapper(timelineWrapperElm: HTMLElement) {\n        const slideGap = (this.getAttribute('slide-gap') || '50') + 'px';\n        timelineWrapperElm.style.setProperty('--slide-gap', slideGap);\n    }\n\n    setInitYear(year: string) {\n        if (!year || year.length !== 4) return;\n        for (let i = 0; i < this.numbers.length; i++) {\n            this.numbers[i]?.setAttribute('init-number', year.substring(i, i + 1));\n        }\n    }\n    setYear(year: string) {\n        if (!year || year.length !== 4) return;\n        for (let i = 0; i < this.numbers.length; i++) {\n            this.numbers[i]?.setAttribute('number', year.substring(i, i + 1));\n        }\n        this.shadowRoot?.querySelector('.year')?.classList.add('animate-color');\n    }\n\n    startYearAnimOnEnterScreen(elms: HTMLElement[] | undefined) {\n        if (!elms || elms.length === 0) return () => {};\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    if (entry.isIntersecting) {\n                        setTimeout(() => {\n                            this.setYear(this.getAttribute('year') || '');\n                        }, 500); // Delay before changing year.\n                    }\n                });\n            },\n            { rootMargin: '-40% 0px' }\n        );\n        elms.forEach((elm) => {\n            observer.observe(elm);\n        });\n\n        // Return function that unobserves the element.\n        return () => {\n            observer.disconnect();\n        };\n    }\n\n    setupYearColorInterpolation(elm: HTMLElement) {\n        const getCssVariableValue = (variableName: string): string | null => {\n            const styles = getComputedStyle(document.documentElement);\n            return styles.getPropertyValue(variableName).trim() || null;\n        };\n\n        const hexToRgba = (hex: string, opacity: number): number[] => {\n            const hexValue = hex.replace('#', '');\n            const r = parseInt(hexValue.substring(0, 2), 16);\n            const g = parseInt(hexValue.substring(2, 4), 16);\n            const b = parseInt(hexValue.substring(4, 6), 16);\n            return [r, g, b, opacity];\n        };\n\n        const calculateScrollPercentage = (elm: HTMLElement, maxScroll: number): number => {\n            const elmY = elm.getBoundingClientRect().top;\n            const yPos = window.scrollY - elmY;\n\n            const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);\n            const clampedYPos = clamp(yPos, 0, maxScroll);\n            const percentage = clampedYPos / maxScroll;\n            return percentage;\n        };\n\n        const initColour = hexToRgba(getCssVariableValue('--theme-primary-color') || '#de3000', 1);\n        const endColour = [0, 0, 0, 0.05];\n        const yearElm = this.queryUnsafe<HTMLElement>('.year');\n        document.addEventListener('scroll', () => {\n            // Calculate the scroll percentage of the element out of the max scroll amount.\n            const percentage = calculateScrollPercentage(elm, 500);\n            // Get an interpolated colour based on the percentage.\n            const colour = this.interpolateColor(initColour, endColour, percentage);\n            // Set the colour of the year element.\n            yearElm.style.color = `rgba(${colour[0]}, ${colour[1]}, ${colour[2]}, ${colour[3]})`;\n        });\n    }\n\n    /**\n     *\n     * @param color1 Start RGB (or RGBA).\n     * @param color2 End RGB (or RGBA).\n     * @param percentage Percentage of interpolation (0-1).\n     * @returns An array of the interpolated color.\n     */\n    interpolateColor(color1: number[], color2: number[], percentage: number) {\n        if (color1.length != color2.length) {\n            throw new Error('Start and end colors must have the same number of components');\n        }\n\n        const resultColour: number[] = [];\n        for (let i = 0; i < color1.length; i++) {\n            const color1Entry = color1[i] as number;\n            const color2Entry = color2[i] as number;\n            resultColour.push(color1Entry + (color2Entry - color1Entry) * percentage);\n        }\n        return resultColour;\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('timeline-wrapper-large-year') === undefined) {\n    customElements.define('timeline-wrapper-large-year', TimelineWrapperLargeYear);\n}\n","import { TIMELINE_EVENT_SLIDE_YEAR_CHANGE } from './timeline-constants';\n\nexport class TimelineComponentHelper {\n    private shadowRoot: ShadowRoot;\n\n    constructor(private componentElm: HTMLElement) {\n        this.shadowRoot = componentElm.shadowRoot as ShadowRoot;\n    }\n\n    setupAnimatedTextElm(\n        elmSelector: string,\n        contentAttribute: string | null,\n        isHtml: boolean,\n        delayAttribute: string,\n        durationAttribute: string\n    ) {\n        const elm = this.shadowRoot.querySelector(elmSelector) as HTMLElement;\n        if (!elm) return;\n        const delay = this.componentElm.getAttribute(delayAttribute) || '0';\n        const duration = this.componentElm.getAttribute(durationAttribute) || '1000';\n        if (isHtml) {\n            this.setHtmlFromAttribute(elmSelector, contentAttribute);\n        } else {\n            this.setContentFromAttribute(elmSelector, contentAttribute);\n        }\n        this.setAnimationProps(elm, delay, duration);\n    }\n\n    setAnimationProps(elm: HTMLElement, delay: string, duration: string) {\n        elm.style.setProperty('--animation-delay', delay + 'ms');\n        elm.style.setProperty('--animation-duration', duration + 'ms');\n    }\n\n    setHtmlFromAttribute(elmSelector: string, contentAttribute: string | null) {\n        const elm = this.shadowRoot.querySelector(elmSelector) as HTMLElement;\n        if (!elm) return;\n        if (contentAttribute) {\n            const content = this.componentElm.getAttribute(contentAttribute);\n            elm.innerHTML = content || '';\n        }\n    }\n\n    setContentFromAttribute(elmSelector: string, contentAttribute: string | null) {\n        const elm = this.shadowRoot.querySelector(elmSelector) as HTMLElement;\n        if (!elm) return;\n        if (contentAttribute) {\n            const content = this.componentElm.getAttribute(contentAttribute);\n            elm.innerText = content || '';\n        }\n    }\n\n    setupYearChangeEventDispatcher(year: string | null) {\n        if (!year) {\n            throw new Error('Year is required to setup year change event dispatcher.');\n        }\n\n        const fireYearChangedEvent = (year: string) => {\n            const event = new CustomEvent(TIMELINE_EVENT_SLIDE_YEAR_CHANGE, { detail: year, bubbles: true });\n            this.componentElm.dispatchEvent(event);\n        };\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    if (entry.isIntersecting) {\n                        fireYearChangedEvent(year);\n                    }\n                });\n            },\n            { rootMargin: '-40% 0px' }\n        );\n        observer.observe(this.componentElm);\n    }\n\n    /**\n     * Set up enter/exit animations for elements. They will require to have the animation css custom properties --animation-delay and --animation-duration set.\n     * See setAnimationProps() for setting these properties (or higher level functions like setupAnimatedTextElm()).\n     * @param elms Elements to animate.\n     * @param animationClass The class to add to the element when it enters the viewport.\n     * @param enterIntersectionObserverOptions Options to pass to the enter animation IntersectionObserver.\n     * @param exitIntersectionObserverOptions Options to pass to the exit animation IntersectionObserver.\n     * @returns A function that unobserves the elements.\n     */\n    enableEnterExitAnimations(\n        elms: HTMLElement[],\n        animationClass: string,\n        enterIntersectionObserverOptions: IntersectionObserverInit = {},\n        exitIntersectionObserverOptions: IntersectionObserverInit = {}\n    ) {\n        if (!elms || elms.length === 0) return () => {};\n\n        const enterAnimationObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    if (entry.isIntersecting) {\n                        const elm = entry.target as HTMLElement;\n                        elm.classList.add(animationClass);\n                    }\n                });\n            },\n            { rootMargin: '-200px 0px', ...enterIntersectionObserverOptions }\n        );\n\n        // The exit observer is separate to allow for a different rootMargin.\n        // If the root margin was also a negative value, elements would pop out of existence on screen.\n        const exitAnimationObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    if (!entry.isIntersecting) {\n                        const elm = entry.target as HTMLElement;\n                        elm.classList.remove(animationClass);\n                    }\n                });\n            },\n            { rootMargin: '0px', ...exitIntersectionObserverOptions }\n        );\n\n        elms.forEach((elm) => {\n            enterAnimationObserver.observe(elm);\n            exitAnimationObserver.observe(elm);\n        });\n\n        // Return function that unobserves the element.\n        return () => {\n            enterAnimationObserver.disconnect();\n            exitAnimationObserver.disconnect();\n        };\n    }\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\nimport { TimelineComponentHelper } from './TimelineComponentHelper';\n\nconst textImageSlideTemplate = document.createElement('template');\ntextImageSlideTemplate.innerHTML = `\n    <style>\n        :host {\n            --image-width: 400px;\n            --image1-height: calc(var(--image-width) * var(--image1-aspect-ratio, 0.56));\n            --image2-height: calc(var(--image-width) * var(--image2-aspect-ratio, 0.56));\n            --images-height-one-image: calc(var(--image1-height) + 50px);\n            --images-height-extra-padding: 75px;\n            /* NOTE: images-height-two-images = img1-height x img2-startPosPerc + img2-height + some-padding */\n            --images-height-two-images: calc((var(--image1-height) * 0.75) + var(--image2-height) + var(--images-height-extra-padding));\n            --flex-reverse: row-reverse;\n            --flex-reverse-text-container: row-reverse;\n            --flex-reverse-line-logo-container: row-reverse;\n        }\n        .slide-wrapper {\n            position: relative;\n        }\n        .year {\n            font-size: 2.5rem;\n            color: var(--theme-primary-color);\n            margin: 0;\n        }\n        .title {\n            font-size: 1.8rem;\n            margin-top: 0;\n            hyphens: auto;\n        }\n        .slide {\n            display: flex;\n            justify-content: space-between;\n            gap: 3rem;\n            padding: 5rem 1rem;\n        }\n        .slide .text {\n            padding: 1rem;\n            flex: 1;\n            display: flex;\n            gap: 2.5rem;\n            align-items: start;\n        }\n        .slide .text .slide-content-wrapper {\n            max-width: 100%;\n        }\n        .line-logo {\n            display: flex;\n            flex-direction: row;\n            gap: 1rem;\n            align-items: center;\n            margin-top: 1rem;\n        }\n        .line {\n            width: 150px;\n            border-top: 2px solid var(--theme-primary-color);\n        }\n        .logo {\n            width: 30px;\n            height: 30px;\n            fill: var(--theme-primary-color);\n        }\n        slot[name=\"statistics\"]::slotted(*) {\n            font-size: 0.7rem;\n            margin-top: 0.7rem;\n        }\n        .slide .images {\n            position: relative;\n            flex: 1;\n        }\n        .slide .images img {\n            object-fit: cover;\n            box-sizing: border-box;\n            position: absolute;\n            --image-aspect-ratio: 0.56;\n            width: var(--image-width);\n            height: calc(var(--image-width) * var(--image-aspect-ratio));\n            border: 10px solid white;\n            box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);\n        }\n        .slide .images img:nth-child(1) {\n            top: var(--parallax-offset, 0px);\n        }\n        .slide.reverse .images img:nth-child(1) {\n            right: 10px;\n        }\n        .slide .images img:nth-child(2) {\n            top: calc((var(--image1-height) * 0.75) + var(--parallax-offset, 0px));\n            left: 150px;\n        }\n        .slide.reverse .images img:nth-child(2) {\n            left: unset;\n            right: 150px;\n        }\n\n        .apply-animation {\n            opacity: 0;\n        }\n        .animate-in {\n            opacity: 0;\n            animation: fade-up var(--animation-duration, 1s);\n            animation-fill-mode: forwards;\n            animation-delay: var(--animation-delay);\n        }\n\n        @media(max-width: 1200px) {\n            .line {\n                width: 70px;\n            }\n            slot[name=\"statistics\"]::slotted(*) {\n                font-size: 0.65rem;\n            }\n        }\n\n        @media(max-width: 768px) {\n            :host {\n                --image-width: 300px;\n                --flex-reverse: column-reverse;\n                --flex-reverse-text-container: column;\n                --flex-reverse-line-logo-container: row;\n            }\n            .slide {\n                padding: 3rem 1rem;\n                flex-direction: column;\n                gap: 1rem;\n            }\n            .slide .text {\n                flex-direction: column;\n            }\n            .line-logo {\n                margin-top: 0;\n            }\n            slot[name=\"statistics\"]::slotted(*) {\n                font-size: 1rem;\n                margin-bottom: .75rem;\n            }\n            .slide .images {\n                margin: -2rem auto 2rem;\n                width: 375px;\n            }\n            .slide .images img {\n                --image-aspect-ratio: 0.56;\n            }\n            .slide .images img:nth-child(2) {\n                left: 75px;\n            }\n            .slide.reverse .images img:nth-child(2) {\n                left: unset;\n                right: 125px;\n            }\n        }\n\n        @media(max-width: 576px) {\n            :host {\n                --image-width: 250px;\n                --flex-reverse: column-reverse;\n                --flex-reverse-text-container: column;\n            }\n            .slide {\n                flex-direction: column;\n            }\n            .slide .text {\n                flex-direction: column;\n            }\n            .slide .text .slide-content-wrapper .title {\n                font-size: 1.5rem;\n            }\n            .slide .images {\n                margin: 0 auto;\n                width: 300px;\n            }\n            .slide .images img {\n                --image-aspect-ratio: 0.56;\n            }\n            .slide .images img:nth-child(2) {\n                left: 50px;\n            }\n            .slide.reverse .images img:nth-child(2) {\n                left: unset;\n                right: 75px;\n            }\n        }\n\n        @keyframes fade-up {\n            0% {\n                opacity: 0;\n                transform: translateY(50px);\n            }\n            100% {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n    </style>\n    <div class=\"slide-wrapper\">\n        <div class=\"slide\">\n            <div class=\"text\">\n                <div class=\"logo-and-stats-container\">\n                    <div class=\"line-logo\">\n                        <div class=\"line\"></div>\n                        <svg class=\"logo\" width=\"100%\" height=\"100%\" viewBox=\"0 0 148 146\" version=\"1.1\">\n                            <g transform=\"matrix(4.16667,0,0,4.16667,0,-3.74166)\">\n                                <path d=\"M32.367,13.436C31.958,13.244 31.46,12.947 31.748,11.987C32.132,10.701 32.053,9.164 31.51,7.928C31.214,7.253 30.91,7.006 30.155,7.502C21.912,12.918 17.662,21.177 17.662,32.475C17.662,33.08 17.713,35.33 17.748,35.844L17.776,35.849L21.633,35.849C22.419,35.849 22.819,35.621 22.561,34.498C21.738,30.911 20.795,28.209 22.452,26.278C24.024,24.707 25.278,24.543 29.557,24.543C32.822,24.543 35.469,21.898 35.469,18.633C35.469,16.386 34.213,14.436 32.367,13.436ZM23.312,4.862C23.239,4.654 23.143,4.335 22.794,3.768C21.747,2.059 19.884,0.898 17.734,0.898C15.48,0.898 13.525,2.162 12.528,4.017C12.325,4.376 11.99,4.891 11.13,4.631C9.096,4.017 6.801,4.486 5.194,6.094C3.599,7.688 3.119,9.964 3.718,11.985C3.952,12.77 3.679,13.122 3.188,13.388C1.311,14.403 0,16.351 0,18.633C0,21.196 1.634,23.371 3.916,24.189C4.578,24.379 4.91,24.551 5.275,23.72C8.647,16.059 14.865,8.566 23.312,4.862ZM14.588,34.766C14.588,22.928 19.474,11.662 30.077,5.925C29.901,5.764 29.358,5.341 29.264,5.278C29.003,5.102 28.813,5.146 28.562,5.318C9.342,15.857 10.035,35.553 10.017,35.849L13.582,35.849C14.443,35.849 14.588,35.734 14.588,34.766Z\"/>\n                            </g>\n                        </svg>\n                    </div>\n                    <div class=\"apply-animation\">\n                        <slot name=\"statistics\"></slot>\n                    </div>\n                </div>\n                <div class=\"slide-content-wrapper\">\n                    <h2 class=\"year apply-animation\"></h2>\n                    <h2 class=\"title apply-animation\"></h2>\n                    <div class=\"text-content-wrapper apply-animation\" style=\"--animation-delay: 300ms;\">\n                        <slot name=\"text-content\"></slot>\n                    </div>\n                </div>\n            </div>\n            <div class=\"images\">\n\n            </div>\n        </div>\n    </div>\n`;\n\nclass TimelineSlideTextImage extends IpWebComponent {\n    private unregisterAnimation: () => void = () => {};\n    private unregisterParallax: () => void = () => {};\n    private timelineComponentHelper: TimelineComponentHelper | undefined;\n\n    constructor() {\n        super(textImageSlideTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        this.timelineComponentHelper = new TimelineComponentHelper(this);\n        this.timelineComponentHelper.setupYearChangeEventDispatcher(this.getAttribute('year'));\n\n        const reverse = this.getAttribute('reverse') === 'true';\n        if (reverse) {\n            const slideElm = this.queryUnsafe<HTMLElement>('.slide');\n            slideElm.classList.add('reverse');\n            slideElm.style.flexDirection = 'var(--flex-reverse)';\n            const textContainerElm = this.queryUnsafe<HTMLElement>('.text');\n            textContainerElm.style.flexDirection = 'var(--flex-reverse-text-container)';\n            const lineLogoElm = this.queryUnsafe<HTMLElement>('.line-logo');\n            lineLogoElm.style.flexDirection = 'var(--flex-reverse-line-logo-container)';\n        }\n\n        // Setup animated text elements in the component.\n        this.timelineComponentHelper.setupAnimatedTextElm('.year', 'year', false, 'yearDelay', 'yearDuration');\n        this.timelineComponentHelper.setupAnimatedTextElm('.title', 'title', false, 'titleDelay', 'titleDuration');\n        this.timelineComponentHelper.setupAnimatedTextElm(\n            '.text-content-wrapper',\n            null,\n            false,\n            'textDelay',\n            'textDuration'\n        );\n\n        const img1Url = this.getProp('img1Url');\n        const img1Delay = this.getProp('img1Delay', '0');\n        const img1Duration = this.getProp('img1Duration', '1000');\n        const img1AspectRatio = this.getProp('img1AspectRatio', '0.56');\n        const img2Url = this.getProp('img2Url');\n        const img2Delay = this.getProp('img2Delay', '300');\n        const img2Duration = this.getProp('img2Duration', '1000');\n        const img2AspectRatio = this.getProp('img2AspectRatio', '0.56');\n        const img1Elm = this.addImage({\n            imageUrl: img1Url,\n            delay: img1Delay,\n            animDuration: img1Duration,\n            aspectRatio: img1AspectRatio\n        });\n        const img2Elm = this.addImage({\n            imageUrl: img2Url,\n            delay: img2Delay,\n            animDuration: img2Duration,\n            aspectRatio: img2AspectRatio\n        });\n\n        // Set slide min height.\n        this.style.setProperty('--image1-aspect-ratio', img1AspectRatio);\n        this.style.setProperty('--image2-aspect-ratio', img2AspectRatio);\n\n        const hasTwoImages = !!img1Url && !!img2Url;\n\n        const imageSideElm = this.queryUnsafe<HTMLElement>('.images');\n        imageSideElm.style.minHeight = hasTwoImages\n            ? 'var(--images-height-two-images)'\n            : 'var(--images-height-one-image)';\n\n        // Add parallax effect to images.\n        this.setParallaxCoefficient(img1Elm, 0.1);\n        this.setParallaxCoefficient(img2Elm, 0.3);\n        const parallaxElms = [img1Elm, img2Elm];\n        this.unregisterParallax = this.addParallaxEffect(parallaxElms as HTMLElement[]);\n\n        // Add fade in animations to elements in this component.\n        const animatedElmsInShadow = this.queryAll<HTMLElement>('.apply-animation');\n        this.unregisterAnimation = this.timelineComponentHelper.enableEnterExitAnimations(\n            [...animatedElmsInShadow],\n            'animate-in'\n        );\n    }\n\n    disconnectedCallback() {\n        this.unregisterAnimation();\n        this.unregisterParallax();\n    }\n\n    setCssProperty(propertyName: string, value: string) {\n        const rootElm = this.shadowRoot?.activeElement;\n        if (!rootElm) return;\n        (rootElm as HTMLElement).style.setProperty(propertyName, value);\n    }\n\n    addImage(options: { imageUrl?: string | null; delay: string; animDuration: string; aspectRatio?: string }) {\n        const { imageUrl, delay = '0', animDuration = '1', aspectRatio = '0.56' } = options;\n        if (!imageUrl) return;\n        const img = document.createElement('img');\n        img.classList.add('apply-animation');\n        img.style.setProperty('--image-aspect-ratio', aspectRatio);\n        img.src = imageUrl;\n        this.timelineComponentHelper?.setAnimationProps(img, delay, animDuration);\n        this.queryUnsafe<HTMLElement>('.images').append(img);\n        return img;\n    }\n\n    setParallaxCoefficient(elm: HTMLElement | undefined, coefficient: number) {\n        elm?.setAttribute('parallax-coefficient', coefficient.toString());\n    }\n\n    addParallaxEffect(elms: HTMLElement[] | undefined) {\n        if (!elms || elms.length === 0) return () => {};\n        // Remove all undefined or null elements.\n        elms = elms.filter((elm) => !!elm);\n\n        // Add the parallax class, if it doesn't already exist.\n        elms.forEach((elm) => elm.classList.add('parallax'));\n\n        const getParallaxFunc = (elm: HTMLElement) => {\n            return () => {\n                // Find where the middle of the slide is in relation to the window in percent.\n                // Then use that percent to calculate the parallax amount using a coefficient to limit movement.\n                const slideBoundingRect = this.getBoundingClientRect();\n                const slideTopPos = slideBoundingRect.top;\n                const slideHeight = slideBoundingRect.bottom - slideBoundingRect.top;\n                const slideMid = slideTopPos + slideHeight / 2;\n                const percentageFromTop = slideMid / window.innerHeight;\n\n                const maxMovementPercentCoefficient =\n                    Number.parseFloat(elm.getAttribute('parallax-coefficient') || '0') || 0.3;\n                const parallaxAmount = percentageFromTop * (slideHeight / 2) * maxMovementPercentCoefficient;\n\n                elm.style.setProperty('--parallax-offset', `${parallaxAmount}px`);\n            };\n        };\n\n        const observer = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    const elm = entry.target as HTMLElement;\n                    const parallax = getParallaxFunc(elm);\n                    if (entry.isIntersecting) {\n                        window.addEventListener('scroll', parallax, false);\n                    } else {\n                        window.removeEventListener('scroll', parallax, false);\n                    }\n                });\n            },\n            { rootMargin: '50% 0px' }\n        );\n        elms.forEach((elm) => {\n            observer.observe(elm);\n            // Init element position immediately.\n            getParallaxFunc(elm)();\n        });\n\n        // Return function that unobserves the element.\n        return () => {\n            observer.disconnect();\n        };\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('slide-text-image') === undefined) {\n    customElements.define('slide-text-image', TimelineSlideTextImage);\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\nimport { TimelineComponentHelper } from './TimelineComponentHelper';\n\nconst citationSlideTemplate = document.createElement('template');\ncitationSlideTemplate.innerHTML = `\n<style>\n    :host {\n        --background-color: #fff;\n        --header-font-size: 2.5rem;\n        --slide-padding: 10rem;\n    }\n    .slide-wrapper {\n        min-height: 400px;\n        background-color: var(--background-color);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: var(--slide-padding);\n    }\n    .logo {\n        height: 50px;\n        fill: #333;\n    }\n    .title {\n        text-align: center;\n        font-size: var(--header-font-size);\n    }\n    .text {\n        text-align: center;\n    }\n    .apply-animation {\n        opacity: 0;\n    }\n    .animate-in {\n        opacity: 0;\n        animation: fade-up var(--animation-duration, 1s);\n        animation-fill-mode: forwards;\n        animation-delay: var(--animation-delay);\n    }\n\n    @media(max-width: 768px) {\n        :host {\n            --header-font-size: 2rem;\n            --slide-padding: 6rem;\n        }\n    }\n\n    @media(max-width: 576px) {\n        :host {\n            --header-font-size: 1.8rem;\n            --slide-padding: 3rem;\n        }\n    }\n\n    @keyframes fade-up {\n        0% {\n            opacity: 0;\n            transform: translateY(50px);\n        }\n        100% {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n<div class=\"slide-wrapper\">\n    <svg class=\"logo\" width=\"100%\" height=\"100%\" viewBox=\"0 0 148 146\" version=\"1.1\">\n        <g transform=\"matrix(4.16667,0,0,4.16667,0,-3.74166)\">\n            <path d=\"M32.367,13.436C31.958,13.244 31.46,12.947 31.748,11.987C32.132,10.701 32.053,9.164 31.51,7.928C31.214,7.253 30.91,7.006 30.155,7.502C21.912,12.918 17.662,21.177 17.662,32.475C17.662,33.08 17.713,35.33 17.748,35.844L17.776,35.849L21.633,35.849C22.419,35.849 22.819,35.621 22.561,34.498C21.738,30.911 20.795,28.209 22.452,26.278C24.024,24.707 25.278,24.543 29.557,24.543C32.822,24.543 35.469,21.898 35.469,18.633C35.469,16.386 34.213,14.436 32.367,13.436ZM23.312,4.862C23.239,4.654 23.143,4.335 22.794,3.768C21.747,2.059 19.884,0.898 17.734,0.898C15.48,0.898 13.525,2.162 12.528,4.017C12.325,4.376 11.99,4.891 11.13,4.631C9.096,4.017 6.801,4.486 5.194,6.094C3.599,7.688 3.119,9.964 3.718,11.985C3.952,12.77 3.679,13.122 3.188,13.388C1.311,14.403 0,16.351 0,18.633C0,21.196 1.634,23.371 3.916,24.189C4.578,24.379 4.91,24.551 5.275,23.72C8.647,16.059 14.865,8.566 23.312,4.862ZM14.588,34.766C14.588,22.928 19.474,11.662 30.077,5.925C29.901,5.764 29.358,5.341 29.264,5.278C29.003,5.102 28.813,5.146 28.562,5.318C9.342,15.857 10.035,35.553 10.017,35.849L13.582,35.849C14.443,35.849 14.588,35.734 14.588,34.766Z\"/>\n        </g>\n    </svg>\n    <h1 class=\"title apply-animation\"></h1>\n    <p class=\"text apply-animation\"></p>\n</div>\n`;\n\nclass TimelineSlideCitation extends IpWebComponent {\n    private unregisterAnimation: () => void = () => {};\n    private timelineComponentHelper: TimelineComponentHelper | undefined;\n\n    constructor() {\n        super(citationSlideTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        this.timelineComponentHelper = new TimelineComponentHelper(this);\n\n        // Set background color.\n        const backgroundColor = this.getProp('bg-color');\n        if (backgroundColor) {\n            this.queryUnsafe('.slide-wrapper').setAttribute('style', `--background-color: ${backgroundColor}`);\n        }\n\n        // Setup animated text elements in the component.\n        this.timelineComponentHelper.setupAnimatedTextElm('.title', 'title', false, 'titleDelay', 'titleDuration');\n        this.timelineComponentHelper.setupAnimatedTextElm('.text', 'text', false, 'textDelay', 'textDuration');\n\n        const animatedElmsInShadow = this.queryAll<HTMLElement>('.apply-animation');\n        this.unregisterAnimation = this.timelineComponentHelper.enableEnterExitAnimations(\n            animatedElmsInShadow,\n            'animate-in'\n        );\n    }\n\n    disconnectedCallback() {\n        this.unregisterAnimation();\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('slide-citation') === undefined) {\n    customElements.define('slide-citation', TimelineSlideCitation);\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\nimport { TimelineComponentHelper } from './TimelineComponentHelper';\n\nconst fullImageSlideTemplate = document.createElement('template');\nfullImageSlideTemplate.innerHTML = `\n<style>\n    :host {\n        --background-color: #fff;\n        --header-font-size: 2rem;\n        --text-box-width: 33%;\n        --text-box-padding: 2rem;\n        --slide-min-height: 600px;\n    }\n    .slide-wrapper {\n        min-height: var(--slide-min-height);\n        position: relative;\n        background-position: center;\n        background-size: cover;\n    }\n    .text-container {\n        width: var(--text-box-width);\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        background: rgb(249, 249, 249);\n        padding: var(--text-box-padding);\n    }\n    .title {\n        margin: 0;\n        font-size: var(--header-font-size);\n    }\n    .text {\n        margin-top: 0;\n    }\n    .apply-animation {\n        opacity: 0;\n    }\n    .animate-in {\n        opacity: 0;\n        animation: fade-up var(--animation-duration, 1s);\n        animation-fill-mode: forwards;\n        animation-delay: var(--animation-delay);\n    }\n\n    @media(max-width: 768px) {\n        :host {\n            --header-font-size: 1.8rem;\n            --text-box-width: 50%;\n            --slide-min-height: 500px;\n        }\n    }\n\n    @media(max-width: 576px) {\n        :host {\n            --header-font-size: 1.6rem;\n            --text-box-width: 100%;\n            --slide-min-height: 400px;\n        }\n    }\n\n    @keyframes fade-up {\n        0% {\n            opacity: 0;\n            transform: translateY(50px);\n        }\n        100% {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n<div class=\"slide-wrapper\">\n    <div class=\"text-container\">\n        <h1 class=\"title apply-animation\"></h1>\n        <p class=\"text apply-animation\"></p>\n    </div>\n</div>\n`;\n\nclass TimelineSlideFullImage extends IpWebComponent {\n    private unregisterAnimation: () => void = () => {};\n    private timelineComponentHelper: TimelineComponentHelper | undefined;\n\n    constructor() {\n        super(fullImageSlideTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        this.timelineComponentHelper = new TimelineComponentHelper(this);\n\n        // Set background image.\n        const backgroundImgUrl = this.getProp('bg-img-url');\n        if (backgroundImgUrl) {\n            const slideWrapperElm = this.queryUnsafe<HTMLElement>('.slide-wrapper');\n            slideWrapperElm.style.backgroundImage = `url('${backgroundImgUrl}')`;\n            const [focusX, focusY] = [this.getProp('bg-focus-x', '50'), this.getProp('bg-focus-y', '50')];\n            slideWrapperElm.style.backgroundPosition = `${focusX}% ${focusY}%`;\n        } else {\n            console.error('Background image is not set for full image slide.');\n        }\n\n        // Setup animated text elements in the component.\n        this.timelineComponentHelper.setupAnimatedTextElm('.title', 'title', false, 'titleDelay', 'titleDuration');\n        this.timelineComponentHelper.setupAnimatedTextElm('.text', 'text', false, 'textDelay', 'textDuration');\n\n        const animatedElmsInShadow = this.queryAll<HTMLElement>('.apply-animation');\n        this.unregisterAnimation = this.timelineComponentHelper.enableEnterExitAnimations(\n            animatedElmsInShadow,\n            'animate-in'\n        );\n    }\n\n    disconnectedCallback() {\n        this.unregisterAnimation();\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('slide-full-image') === undefined) {\n    customElements.define('slide-full-image', TimelineSlideFullImage);\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\n\nconst statisticContainerTemplate = document.createElement('template');\nstatisticContainerTemplate.innerHTML = `\n<style>\n    :host {\n        position: sticky;\n        top: 10%;\n        z-index: 10;\n        height: 0px;\n    }\n    .statistic-container {\n        padding: 1rem;\n        background-color: rgba(249, 249, 249, 0.7);\n        width: fit-content;\n        min-width: 250px;\n        max-width: 450px;\n        opacity: 0;\n        transition: opacity 0.5s;\n    }\n    .statistic-container.show {\n        opacity: 1;\n    }\n    .statistic-container > slot {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n    }\n\n    @media(max-width: 768px) {\n        :host {\n            top: 5%;\n        }\n    }\n\n    @media(max-width: 576px) {\n        :host {\n            top: 30px;\n        }\n        .statistic-container {\n            max-width: 100%;\n            width: 100%;\n        }\n    }\n</style>\n<div class=\"statistic-container\">\n</div>\n`;\n\nclass StatisticContainer extends IpWebComponent {\n    private containerElm: HTMLElement | null = null;\n    private statisticElms: HTMLElement[] = [];\n\n    constructor() {\n        super(statisticContainerTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        this.containerElm = this.queryUnsafe<HTMLElement>('.statistic-container');\n\n        const statisticIcons = [\n            this.getProp('statistic1-icon'),\n            this.getProp('statistic2-icon'),\n            this.getProp('statistic3-icon')\n        ];\n        const statisticNames = [\n            this.getProp('statistic1-name'),\n            this.getProp('statistic2-name'),\n            this.getProp('statistic3-name')\n        ];\n        const statisticPostfixes = [\n            this.getProp('statistic1-postfix'),\n            this.getProp('statistic2-postfix'),\n            this.getProp('statistic3-postfix')\n        ];\n\n        for (let i = 0; i < statisticNames.length; i++) {\n            const name = statisticNames[i];\n            if (name) {\n                const statElm = document.createElement('statistic-value');\n                statElm.setAttribute('icon', statisticIcons[i] || '');\n                statElm.setAttribute('name', statisticNames[i] || '');\n                statElm.setAttribute('postfix', statisticPostfixes[i] || '');\n                this.containerElm.appendChild(statElm);\n                this.statisticElms.push(statElm);\n            }\n        }\n\n        // Listen for when new statistic values are reached.\n        this.setupValuesChangeListener();\n\n        // Set when to display the container based on when the first sibling is close to the top.\n        const sibling = this.nextElementSibling;\n        if (sibling) {\n            window.addEventListener('scroll', () => {\n                const rect = sibling.getBoundingClientRect();\n                const distanceToTop = rect.top;\n                this.setShow(distanceToTop < 200);\n            });\n        }\n    }\n\n    static get observedAttributes() {\n        return ['show'];\n    }\n\n    attributeChangedCallback(name, _oldValue, newValue) {\n        if (name === 'show') {\n            this.setShow(newValue === 'true');\n        }\n    }\n\n    private setShow(show: boolean) {\n        if (show) {\n            this.containerElm?.classList.add('show');\n        } else {\n            this.containerElm?.classList.remove('show');\n        }\n    }\n\n    private setupValuesChangeListener() {\n        const setStatisticValuesFromElm = (statisticValuesElm?: HTMLElement) => {\n            if (!statisticValuesElm) {\n                return;\n            }\n            const statistic1Value = statisticValuesElm.getAttribute('statistic1-value');\n            const statistic2Value = statisticValuesElm.getAttribute('statistic2-value');\n            const statistic3Value = statisticValuesElm.getAttribute('statistic3-value');\n            if (statistic1Value) {\n                this.statisticElms[0]?.setAttribute('value', statistic1Value.toString());\n            }\n            if (statistic2Value) {\n                this.statisticElms[1]?.setAttribute('value', statistic2Value.toString());\n            }\n            if (statistic3Value) {\n                this.statisticElms[2]?.setAttribute('value', statistic3Value.toString());\n            }\n        };\n\n        const getTopmostVisibleEntry = (valueElms: HTMLElement[]) => {\n            const filteredEntries = valueElms.filter(\n                (e) => !!e.nextElementSibling && e.nextElementSibling.getBoundingClientRect().bottom >= 200\n            );\n\n            return filteredEntries[0];\n        };\n\n        // Find all value elements and set up scroll listener.\n\n        const valueElms = [...document.querySelectorAll('.statistic-values')] as HTMLElement[];\n        // Only include value elements that have at least one value set.\n        const validValueElms = valueElms.filter(\n            (elm) =>\n                !!elm.getAttribute('statistic1-value') ||\n                !!elm.getAttribute('statistic2-value') ||\n                !!elm.getAttribute('statistic3-value')\n        );\n        window.addEventListener('scroll', () => {\n            const valuesElm = getTopmostVisibleEntry(validValueElms);\n            // Use visible element that is valid or pick the last element (if all elements are outside of top of view).\n            setStatisticValuesFromElm(valuesElm || validValueElms[validValueElms.length - 1]);\n        });\n\n        // Set initial values.\n        const valuesElm = getTopmostVisibleEntry(validValueElms);\n        // Use visible element that is valid or pick the last element (if all elements are outside of top of view).\n        setStatisticValuesFromElm(valuesElm || validValueElms[validValueElms.length - 1]);\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('statistic-container') === undefined) {\n    customElements.define('statistic-container', StatisticContainer);\n}\n","import { IpWebComponent } from '../../web-components/ip-web-component';\n\nconst statisticValueTemplate = document.createElement('template');\nstatisticValueTemplate.innerHTML = `\n<style>\n    :host {\n    }\n    .statistic {\n        display: grid;\n        grid-template-columns: 1.5em auto auto;\n        grid-template-rows: 1.5em;\n        grid-template-areas:\n            \"icon name value-and-postfix\";\n\n        font-size: 1.5em;\n        gap: 0.4em;\n    }\n    .icon-container {\n        grid-area: icon;\n    }\n    .icon {\n        width: 100%;\n        height: 100%;\n    }\n    .name {\n        grid-area: name;\n    }\n    .value-and-postfix {\n        grid-area: value-and-postfix;\n        display: flex;\n        justify-content: flex-end;\n        gap: 0.2em;\n    }\n    .value {\n        color: var(--theme-primary-color);\n        font-weight: bold;\n    }\n    .postfix {\n        color: var(--theme-primary-color);\n        font-weight: bold;\n    }\n    @media(max-width: 1200px) {\n        .statistic {\n            grid-template-columns: 1.5em auto;\n            grid-template-rows: 1.5em auto;\n            grid-template-areas:\n                \"icon name\"\n                \". value-and-postfix\";\n            margin-bottom: 1em;\n        }\n    }\n    @media(max-width: 768px) {\n        .statistic {\n            grid-template-columns: 1.5em auto auto;\n            grid-template-rows: 1.5em;\n            grid-template-areas:\n            \"icon name value-and-postfix\";\n            margin-bottom: 0;\n        }\n    }\n    @media(max-width: 576px) {\n        .statistic {\n            font-size: 1.2em;\n        }\n    }\n</style>\n<div class=\"statistic\">\n    <span class=\"icon-container\">\n        <img class=\"icon\" />\n    </span>\n    <span class=\"name\"></span>\n    <span class=\"value-and-postfix\">\n        <span class=\"value\"></span>\n        <span class=\"postfix\"></span>\n    </span>\n</div>\n`;\n\nclass StatisticValue extends IpWebComponent {\n    constructor() {\n        super(statisticValueTemplate);\n    }\n\n    // Init component.\n    connectedCallback() {\n        // Set initial values.\n        const iconUrl = this.getProp('icon');\n        const iconElm = this.queryUnsafe<HTMLImageElement>('.icon');\n        if (iconUrl) {\n            iconElm.src = iconUrl;\n        } else {\n            iconElm.style.display = 'none';\n        }\n        this.setContentFromProp('.name', 'name');\n        this.setContentFromProp('.value', 'value');\n        this.setContentFromProp('.postfix', 'postfix');\n    }\n\n    static get observedAttributes() {\n        return ['value'];\n    }\n\n    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {\n        if (name === 'value') {\n            const valueElm = this.queryUnsafe<HTMLElement>('.value');\n            valueElm.textContent = newValue;\n        }\n    }\n}\n\n// Define element, if not already defined.\nif (customElements.get('statistic-value') === undefined) {\n    customElements.define('statistic-value', StatisticValue);\n}\n"],"names":["IPSlider","HTMLElement","constructor","super","this","attachShadow","mode","attachInternals","formAssociated","observedAttributes","connectedCallback","ariaValueNow","value","ariaValueMin","min","ariaValueMax","max","ariaRequired","required","querySelector","sliderHeight","getAttribute","sliderHeiught","setAttribute","valueHolderWidth","valueHolderHeight","overflowErrMsg","underflowErrMsg","invalidErrMsg","checkValidity","autoApplyLimits","toLowerCase","toString","hideValueHolder","slideColor","step","setFormValue","id","isSlider","slider","sliderValueHolder","elm","parseInt","isLargerThanMax","addEventListener","dispatchEvent","Event","style","display","percentage","backgroundColor","background","newValue","isNaN","setValidity","valueMissing","rangeUnderflow","rangeOverflow","reportValidity","html","div","document","createElement","alignContent","width","innerHTML","appendChild","customElements","define","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","exports","module","__webpack_modules__","call","IpWebComponent","templateNode","shadowRoot","content","cloneNode","getProp","attributeName","defaultValue","getPropAsNumber","attr","Number","parseFloat","getPropAsBoolean","query","selector","queryUnsafe","Error","queryAll","res","querySelectorAll","queryById","getElementById","setContentFromProp","innerText","numberSlider","NumberSlider","numberGroupElm","curNum","initNumber","setProperty","attributeChangedCallback","name","_oldValue","targetNum","startAnimation","animateToNumber","numberGroup","classList","add","get","TIMELINE_EVENT_SLIDE_YEAR_CHANGE","TimelineWrapperLargeYearTemplate","TimelineWrapperLargeYear","unregisterAnimation","numbers","today","Date","setInitYear","getFullYear","animatedElmsInShadow","startYearAnimOnEnterScreen","title","textContent","timelineWrapperElm","e","slideYearEvent","setYear","detail","setupTimelineWrapper","setupYearColorInterpolation","disconnectedCallback","slideGap","year","length","i","substring","elms","observer","IntersectionObserver","entries","forEach","entry","isIntersecting","setTimeout","rootMargin","observe","disconnect","initColour","hex","opacity","hexValue","replace","hexToRgba","variableName","getComputedStyle","documentElement","getPropertyValue","trim","endColour","yearElm","maxScroll","elmY","getBoundingClientRect","top","yPos","window","scrollY","Math","calculateScrollPercentage","colour","interpolateColor","color","color1","color2","resultColour","color1Entry","color2Entry","push","TimelineComponentHelper","componentElm","setupAnimatedTextElm","elmSelector","contentAttribute","isHtml","delayAttribute","durationAttribute","delay","duration","setHtmlFromAttribute","setContentFromAttribute","setAnimationProps","setupYearChangeEventDispatcher","fireYearChangedEvent","event","CustomEvent","bubbles","enableEnterExitAnimations","animationClass","enterIntersectionObserverOptions","exitIntersectionObserverOptions","enterAnimationObserver","target","exitAnimationObserver","remove","textImageSlideTemplate","TimelineSlideTextImage","unregisterParallax","timelineComponentHelper","slideElm","flexDirection","img1Url","img1Delay","img1Duration","img1AspectRatio","img2Url","img2Delay","img2Duration","img2AspectRatio","img1Elm","addImage","imageUrl","animDuration","aspectRatio","img2Elm","hasTwoImages","minHeight","setParallaxCoefficient","parallaxElms","addParallaxEffect","setCssProperty","propertyName","rootElm","activeElement","options","img","src","append","coefficient","filter","getParallaxFunc","slideBoundingRect","slideTopPos","slideHeight","bottom","parallaxAmount","innerHeight","parallax","removeEventListener","citationSlideTemplate","TimelineSlideCitation","fullImageSlideTemplate","TimelineSlideFullImage","backgroundImgUrl","slideWrapperElm","backgroundImage","focusX","focusY","backgroundPosition","console","error","statisticContainerTemplate","StatisticContainer","containerElm","statisticElms","statisticIcons","statisticNames","statisticPostfixes","statElm","setupValuesChangeListener","sibling","nextElementSibling","distanceToTop","setShow","show","setStatisticValuesFromElm","statisticValuesElm","statistic1Value","statistic2Value","statistic3Value","getTopmostVisibleEntry","valueElms","validValueElms","valuesElm","statisticValueTemplate","StatisticValue","iconUrl","iconElm"],"sourceRoot":""}