@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

package/assets/js/components/carousel/carousel.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.component.min.js","sources":["../../modules/carousel.js","../_global.js","carousel.component.js"],"sourcesContent":["export const generateThumbnailList = function (carouselComponent) {\n    const thumbnailImages = [];\n    Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {\n        if (slide.hasAttribute('data-thumbnail')) {\n            thumbnailImages[index] = slide.getAttribute('data-thumbnail');\n        }\n    });\n    return thumbnailImages;\n};\nexport const generatePipsHTML = function (carouselComponent, thumbnailImages) {\n    const itemCount = carouselComponent.querySelectorAll(':scope > div').length;\n    let pips = '';\n    for (let i = 1; i <= itemCount; i++) {\n        let pipContent = null;\n        let pipClass = '';\n        if (thumbnailImages.length && thumbnailImages[i - 1]) {\n            pipClass = 'has-thumbnail';\n            pipContent = `<img src=\"${thumbnailImages[i - 1]}\" alt=\"Slide ${i}\" height=\"148\"/>`;\n        }\n        else {\n            pipContent = `Slide ${i}`;\n        }\n        pips += `<button class=\"control-${i} ${pipClass}\" data-slide=\"${i}\" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;\n    }\n    return pips;\n};\nexport const getProgressMax = function (itemCount, visibleItems) {\n    if (visibleItems == 1) {\n        return itemCount;\n    }\n    const max = Math.ceil(itemCount / visibleItems) * visibleItems - visibleItems;\n    return max + 1;\n};\nconst getProgressPercent = function (value, max) {\n    return ((value - 1) / (max - 1)) * 100;\n};\nexport const carousel = function (carouselComponent) {\n    let scrollTimeout;\n    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');\n    const carouselInner = carouselElement.querySelector('.carousel__inner');\n    const carouselControls = carouselElement.querySelector('.carousel__controls');\n    const carouselProgress = carouselElement.querySelector('.carousel__progress [type=\"range\"]');\n    const itemCount = carouselComponent.querySelectorAll(':scope > div').length;\n    let scrollArea = carouselInner.clientWidth;\n    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n    let visibleItems = Math.round(scrollArea / itemWidth);\n    carouselProgress.setAttribute('min', 1);\n    carouselProgress.setAttribute('step', visibleItems);\n    let progressMax = getProgressMax(itemCount, visibleItems);\n    carouselProgress.setAttribute('max', progressMax);\n    carouselProgress.value = 1;\n    let percent = getProgressPercent(1, progressMax);\n    carouselProgress.style.setProperty('--percent', percent + '%');\n    let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n    if ('ontouchstart' in document.documentElement) {\n        stepperEvent = 'touchend';\n        stepperStart = 'touchstart';\n    }\n    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown\n    carouselInner.addEventListener('scroll', function () {\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(function () {\n            const scrollArea = carouselInner.clientWidth;\n            const scrollWidth = carouselInner.scrollWidth;\n            const scrollLeft = carouselInner.scrollLeft;\n            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;\n            const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n            const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;\n            //+60px here is to account for when the next offscreen slide is visible beneath the next arrow\n            const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;\n            const visibleItems = Math.round(scrollArea / itemWidth);\n            //Check if theres room for more slides than we have\n            const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;\n            carouselProgress.setAttribute('step', visibleItems);\n            if (leftOverSpace > 0 && lastItemInView) {\n                targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;\n            }\n            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {\n                button.removeAttribute('aria-current');\n            });\n            carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);\n            // Disable the previous button\n            if (targetSlide == 1)\n                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');\n            // Disable the next button if the last item is in view\n            if (targetSlide > itemCount - visibleItems)\n                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-next').removeAttribute('disabled');\n            carouselProgress.value = targetSlide;\n            progressMax = getProgressMax(itemCount, visibleItems);\n            carouselProgress.setAttribute('max', progressMax);\n            percent = (targetSlide / progressMax) * 100;\n            percent = getProgressPercent(targetSlide, progressMax);\n            carouselProgress.style.setProperty('--percent', percent + '%');\n        }, 100);\n    }, false);\n    // when the buttons are used we need to make sure the carousel scrolls to the correct place\n    carouselControls.addEventListener('click', function (e) {\n        for (let target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == 'function' && target.matches('button')) {\n                e.preventDefault();\n                Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {\n                    button.removeAttribute('aria-current');\n                });\n                target.setAttribute('aria-current', true);\n                const customEvent = new CustomEvent('pip-clicked', {\n                    detail: {\n                        slide: target.getAttribute('data-slide'),\n                    },\n                });\n                carouselComponent.dispatchEvent(customEvent);\n                const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);\n                carouselInner.scroll({\n                    top: 0,\n                    left: el.offsetLeft - carouselInner.getBoundingClientRect().left,\n                    behavior: 'smooth',\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselElement.addEventListener('click', function (e) {\n        const scrollArea = carouselInner.clientWidth;\n        //const scrollWidth = carouselInner.scrollWidth;\n        const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n        const visibleItems = Math.round(scrollArea / itemWidth);\n        const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;\n        const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;\n        //Check if theres room for more slides than we have\n        const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;\n        /*\n        When the last slide isn't filled with items, we only want to move back the number of items on the slide,\n        rather than the total number of possible visible items\n      */\n        const spacesToMove = visibleItems - leftOverSpace;\n        //Only want to change the amount of movement if the last item is visible\n        const movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;\n        for (let target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == 'function' && target.matches('.btn-next, .btn-prev')) {\n                const direction = target.matches('.btn-next') ? 'next' : 'prev';\n                const customEvent = new CustomEvent(`${direction}-clicked`, {\n                    detail: {\n                        slide: target.getAttribute('data-go'),\n                    },\n                });\n                carouselComponent.dispatchEvent(customEvent);\n                e.preventDefault();\n                const scrollTo = target.classList.contains('btn-prev')\n                    ? carouselInner.scrollLeft - movement\n                    : carouselInner.scrollLeft + carouselInner.clientWidth;\n                carouselInner.scroll({\n                    top: 0,\n                    left: scrollTo,\n                    behavior: 'smooth',\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselProgress.addEventListener(stepperStart, function () {\n        clearInterval(stepperInterval);\n        stepperInterval = setInterval(function () {\n            scrollArea = carouselInner.clientWidth;\n            itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n            visibleItems = Math.round(scrollArea / itemWidth);\n            carouselProgress.setAttribute('step', visibleItems);\n            progressMax = getProgressMax(itemCount, visibleItems);\n            carouselProgress.setAttribute('max', progressMax);\n            percent = getProgressPercent(carouselProgress.value, progressMax);\n            carouselProgress.style.setProperty('--percent', percent + '%');\n        }, 10);\n    });\n    carouselProgress.addEventListener(stepperEvent, function () {\n        clearInterval(stepperInterval);\n    });\n    carouselProgress.addEventListener('change', function () {\n        clearInterval(stepperInterval);\n        const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);\n        carouselInner.scroll({\n            top: 0,\n            left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,\n            behavior: 'smooth',\n        });\n        //const direction = target.matches('.btn-next') ? 'next' : 'prev';\n        const customEvent = new CustomEvent(`slider-changed`, {\n            detail: {\n                slide: carouselProgress.value,\n            },\n        });\n        carouselComponent.dispatchEvent(customEvent);\n    }, false);\n};\nexport default carousel;\n","export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { generateThumbnailList, generatePipsHTML, carousel } from '../../modules/carousel.js';\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-carousel');\nclass iamCarousel extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/carousel.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = /* HTML */ `\n      <style>\n        ${loadCSS}\n        ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n      </style>\n      <div class=\"carousel\" part=\"carousel\">\n        <div class=\"carousel__wrapper\">\n          <div class=\"carousel__inner\">\n            <div class=\"carousel__content\" part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"carousel__btns\" part=\"btns\">\n          <button class=\"btn btn-secondary btn-compact fa-plus-large btn-prev\" data-go=\"0\" disabled part=\"prev\">\n            Prev\n          </button>\n          <button class=\"btn btn-secondary btn-compact fa-plus-large btn-next\" data-go=\"2\" part=\"next\">Next</button>\n        </div>\n\n        <div class=\"carousel__controls\" part=\"controls\"></div>\n\n        <div class=\"carousel__progress\" part=\"progress\">\n          <input type=\"range\" min=\"0\" max=\"100\" value=\"1\" step=\"1\" />\n        </div>\n      </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const carouselComponent = this;\n        //const carouselElement = this.shadowRoot.querySelector('.carousel');\n        //const row = this.shadowRoot.querySelector('.row');\n        let thumbnailImages = [];\n        const carouselControls = this.shadowRoot.querySelector('.carousel__controls');\n        if (carouselComponent.querySelector('[data-thumbnail]')) {\n            thumbnailImages = generateThumbnailList(carouselComponent);\n            carouselComponent.classList.add('thumbnails');\n        }\n        // populate the pips\n        carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);\n        Array.from(carouselComponent.querySelectorAll(':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img')).forEach((image) => {\n            image.style.inset = '0 0.5rem 0 0.5rem';\n            image.style.position = 'absolute';\n            image.style.width = 'calc(100% - 1rem)';\n            image.style.height = '100%';\n            image.style['object-fit'] = 'cover';\n            image.closest('div').classList.add('image__wrapper');\n        });\n        carousel(carouselComponent);\n        trackComponent(carouselComponent, 'iam-carousel', [\n            'pip-clicked',\n            'next-clicked',\n            'prev-clicked',\n            'slider-changed',\n        ]);\n    }\n}\nexport default iamCarousel;\n"],"names":["generateThumbnailList","carouselComponent","thumbnailImages","slide","index","generatePipsHTML","itemCount","pips","i","pipContent","pipClass","getProgressMax","visibleItems","getProgressPercent","value","max","carousel","scrollTimeout","carouselElement","carouselInner","carouselControls","carouselProgress","scrollArea","itemWidth","progressMax","percent","stepperInterval","stepperEvent","stepperStart","scrollWidth","scrollLeft","targetSlide","lastItemOffset","lastItemInView","leftOverSpace","button","e","target","customEvent","el","spacesToMove","movement","direction","scrollTo","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamCarousel","template","image"],"mappings":"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"}
+{"version":3,"file":"carousel.component.min.js","sources":["../../modules/carousel.js","../_global.js","carousel.component.js"],"sourcesContent":["export const generateThumbnailList = function (carouselComponent) {\n    const thumbnailImages = [];\n    Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {\n        if (slide.hasAttribute('data-thumbnail')) {\n            thumbnailImages[index] = slide.getAttribute('data-thumbnail');\n        }\n    });\n    return thumbnailImages;\n};\nexport const generatePipsHTML = function (carouselComponent, thumbnailImages) {\n    const itemCount = carouselComponent.querySelectorAll(':scope > div').length;\n    let pips = '';\n    for (let i = 1; i <= itemCount; i++) {\n        let pipContent = null;\n        let pipClass = '';\n        if (thumbnailImages.length && thumbnailImages[i - 1]) {\n            pipClass = 'has-thumbnail';\n            pipContent = `<img src=\"${thumbnailImages[i - 1]}\" alt=\"Slide ${i}\" height=\"148\"/>`;\n        }\n        else {\n            pipContent = `Slide ${i}`;\n        }\n        pips += `<button class=\"control-${i} ${pipClass}\" data-slide=\"${i}\" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;\n    }\n    return pips;\n};\nexport const getProgressMax = function (itemCount, visibleItems) {\n    if (visibleItems == 1) {\n        return itemCount;\n    }\n    const max = Math.ceil(itemCount / visibleItems) * visibleItems - visibleItems;\n    return max + 1;\n};\nconst getProgressPercent = function (value, max) {\n    return ((value - 1) / (max - 1)) * 100;\n};\nexport const carousel = function (carouselComponent) {\n    let scrollTimeout;\n    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');\n    const carouselInner = carouselElement.querySelector('.carousel__inner');\n    const carouselControls = carouselElement.querySelector('.carousel__controls');\n    const carouselProgress = carouselElement.querySelector('.carousel__progress [type=\"range\"]');\n    const itemCount = carouselComponent.querySelectorAll(':scope > div').length;\n    let scrollArea = carouselInner.clientWidth;\n    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n    let visibleItems = Math.round(scrollArea / itemWidth);\n    carouselProgress.setAttribute('min', 1);\n    carouselProgress.setAttribute('step', visibleItems);\n    let progressMax = getProgressMax(itemCount, visibleItems);\n    carouselProgress.setAttribute('max', progressMax);\n    carouselProgress.value = 1;\n    let percent = getProgressPercent(1, progressMax);\n    carouselProgress.style.setProperty('--percent', percent + '%');\n    let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n    if ('ontouchstart' in document.documentElement) {\n        stepperEvent = 'touchend';\n        stepperStart = 'touchstart';\n    }\n    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown\n    carouselInner.addEventListener('scroll', function () {\n        clearTimeout(scrollTimeout);\n        scrollTimeout = setTimeout(function () {\n            const scrollArea = carouselInner.clientWidth;\n            const scrollWidth = carouselInner.scrollWidth;\n            const scrollLeft = carouselInner.scrollLeft;\n            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;\n            const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n            const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;\n            //+60px here is to account for when the next offscreen slide is visible beneath the next arrow\n            const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;\n            const visibleItems = Math.round(scrollArea / itemWidth);\n            //Check if theres room for more slides than we have\n            const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;\n            carouselProgress.setAttribute('step', visibleItems);\n            if (leftOverSpace > 0 && lastItemInView) {\n                targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;\n            }\n            Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {\n                button.removeAttribute('aria-current');\n            });\n            carouselElement.querySelector('.control-' + targetSlide).setAttribute('aria-current', true);\n            // Disable the previous button\n            if (targetSlide == 1)\n                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');\n            // Disable the next button if the last item is in view\n            if (targetSlide > itemCount - visibleItems)\n                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');\n            else\n                carouselElement.querySelector('.btn-next').removeAttribute('disabled');\n            carouselProgress.value = targetSlide;\n            progressMax = getProgressMax(itemCount, visibleItems);\n            carouselProgress.setAttribute('max', progressMax);\n            percent = (targetSlide / progressMax) * 100;\n            percent = getProgressPercent(targetSlide, progressMax);\n            carouselProgress.style.setProperty('--percent', percent + '%');\n        }, 100);\n    }, false);\n    // when the buttons are used we need to make sure the carousel scrolls to the correct place\n    carouselControls.addEventListener('click', function (e) {\n        for (let target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == 'function' && target.matches('button')) {\n                e.preventDefault();\n                Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {\n                    button.removeAttribute('aria-current');\n                });\n                target.setAttribute('aria-current', true);\n                const customEvent = new CustomEvent('pip-clicked', {\n                    detail: {\n                        slide: target.getAttribute('data-slide'),\n                    },\n                });\n                carouselComponent.dispatchEvent(customEvent);\n                const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);\n                carouselInner.scroll({\n                    top: 0,\n                    left: el.offsetLeft - carouselInner.getBoundingClientRect().left,\n                    behavior: 'smooth',\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselElement.addEventListener('click', function (e) {\n        const scrollArea = carouselInner.clientWidth;\n        //const scrollWidth = carouselInner.scrollWidth;\n        const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n        const visibleItems = Math.round(scrollArea / itemWidth);\n        const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;\n        const lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;\n        //Check if theres room for more slides than we have\n        const leftOverSpace = Math.ceil(itemCount / visibleItems) * visibleItems - itemCount;\n        /*\n        When the last slide isn't filled with items, we only want to move back the number of items on the slide,\n        rather than the total number of possible visible items\n      */\n        const spacesToMove = visibleItems - leftOverSpace;\n        //Only want to change the amount of movement if the last item is visible\n        const movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;\n        for (let target = e.target; target && target != this; target = target.parentNode) {\n            if (typeof target.matches == 'function' && target.matches('.btn-next, .btn-prev')) {\n                const direction = target.matches('.btn-next') ? 'next' : 'prev';\n                const customEvent = new CustomEvent(`${direction}-clicked`, {\n                    detail: {\n                        slide: target.getAttribute('data-go'),\n                    },\n                });\n                carouselComponent.dispatchEvent(customEvent);\n                e.preventDefault();\n                const scrollTo = target.classList.contains('btn-prev')\n                    ? carouselInner.scrollLeft - movement\n                    : carouselInner.scrollLeft + carouselInner.clientWidth;\n                carouselInner.scroll({\n                    top: 0,\n                    left: scrollTo,\n                    behavior: 'smooth',\n                });\n                break;\n            }\n        }\n    }, false);\n    carouselProgress.addEventListener(stepperStart, function () {\n        clearInterval(stepperInterval);\n        stepperInterval = setInterval(function () {\n            scrollArea = carouselInner.clientWidth;\n            itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;\n            visibleItems = Math.round(scrollArea / itemWidth);\n            carouselProgress.setAttribute('step', visibleItems);\n            progressMax = getProgressMax(itemCount, visibleItems);\n            carouselProgress.setAttribute('max', progressMax);\n            percent = getProgressPercent(carouselProgress.value, progressMax);\n            carouselProgress.style.setProperty('--percent', percent + '%');\n        }, 10);\n    });\n    carouselProgress.addEventListener(stepperEvent, function () {\n        clearInterval(stepperInterval);\n    });\n    carouselProgress.addEventListener('change', function () {\n        clearInterval(stepperInterval);\n        const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);\n        carouselInner.scroll({\n            top: 0,\n            left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,\n            behavior: 'smooth',\n        });\n        //const direction = target.matches('.btn-next') ? 'next' : 'prev';\n        const customEvent = new CustomEvent(`slider-changed`, {\n            detail: {\n                slide: carouselProgress.value,\n            },\n        });\n        carouselComponent.dispatchEvent(customEvent);\n    }, false);\n};\nexport default carousel;\n","export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { generateThumbnailList, generatePipsHTML, carousel } from '../../modules/carousel';\nimport { trackComponent, trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-carousel');\nclass iamCarousel extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/carousel.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = /* HTML */ `\n      <style>\n        ${loadCSS}\n        ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n      </style>\n      <div class=\"carousel\" part=\"carousel\">\n        <div class=\"carousel__wrapper\">\n          <div class=\"carousel__inner\">\n            <div class=\"carousel__content\" part=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"carousel__btns\" part=\"btns\">\n          <button class=\"btn btn-secondary btn-compact fa-plus-large btn-prev\" data-go=\"0\" disabled part=\"prev\">\n            Prev\n          </button>\n          <button class=\"btn btn-secondary btn-compact fa-plus-large btn-next\" data-go=\"2\" part=\"next\">Next</button>\n        </div>\n\n        <div class=\"carousel__controls\" part=\"controls\"></div>\n\n        <div class=\"carousel__progress\" part=\"progress\">\n          <input type=\"range\" min=\"0\" max=\"100\" value=\"1\" step=\"1\" />\n        </div>\n      </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const carouselComponent = this;\n        //const carouselElement = this.shadowRoot.querySelector('.carousel');\n        //const row = this.shadowRoot.querySelector('.row');\n        let thumbnailImages = [];\n        const carouselControls = this.shadowRoot.querySelector('.carousel__controls');\n        if (carouselComponent.querySelector('[data-thumbnail]')) {\n            thumbnailImages = generateThumbnailList(carouselComponent);\n            carouselComponent.classList.add('thumbnails');\n        }\n        // populate the pips\n        carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);\n        Array.from(carouselComponent.querySelectorAll(':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img')).forEach((image) => {\n            image.style.inset = '0 0.5rem 0 0.5rem';\n            image.style.position = 'absolute';\n            image.style.width = 'calc(100% - 1rem)';\n            image.style.height = '100%';\n            image.style['object-fit'] = 'cover';\n            image.closest('div').classList.add('image__wrapper');\n        });\n        carousel(carouselComponent);\n        trackComponent(carouselComponent, 'iam-carousel', [\n            'pip-clicked',\n            'next-clicked',\n            'prev-clicked',\n            'slider-changed',\n        ]);\n    }\n}\nexport default iamCarousel;\n"],"names":["generateThumbnailList","carouselComponent","thumbnailImages","slide","index","generatePipsHTML","itemCount","pips","i","pipContent","pipClass","getProgressMax","visibleItems","getProgressPercent","value","max","carousel","scrollTimeout","carouselElement","carouselInner","carouselControls","carouselProgress","scrollArea","itemWidth","progressMax","percent","stepperInterval","stepperEvent","stepperStart","scrollWidth","scrollLeft","targetSlide","lastItemOffset","lastItemInView","leftOverSpace","button","e","target","customEvent","el","spacesToMove","movement","direction","scrollTo","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamCarousel","template","image"],"mappings":"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"}

package/assets/js/components/chart/chart.component.js

@@ -1,4 +1,4 @@
-import { setupChart, setEventObservers } from '../../modules/chart.js';
+import { setupChart, setEventObservers } from '../../modules/chart';
 class iamChart extends HTMLElement {
     constructor() {
         super();

package/assets/js/components/collapsible-side/collapsible-side.component.js

@@ -13,26 +13,26 @@ class iamCollapsibleSideMenu extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/collapsible-side.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style class="styles">
-    ${loadCSS}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-      <div class="container" part="container">
-
-        <div class="side-menu" part="side-menu">
-          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
-          
-          <div class="side-menu-content closed" part="side-menu-content">
-            <slot name="menu"></slot>
-          </div>
-        </div>
-
-        <div class="main-content" part="main-content">
-          <slot></slot>
-        </div>
-
-      </div>
+        template.innerHTML = `
+    <style class="styles">
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+      <div class="container" part="container">
+
+        <div class="side-menu" part="side-menu">
+          <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          
+          <div class="side-menu-content closed" part="side-menu-content">
+            <slot name="menu"></slot>
+          </div>
+        </div>
+
+        <div class="main-content" part="main-content">
+          <slot></slot>
+        </div>
+
+      </div>
     `;
         if (this.shadowRoot) {
             this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/js/components/collapsible-side/collapsible-side.component.min.js

@@ -1,9 +1,9 @@
 /*!
-  * iamKey v7.7.1--beta5
+  * iamKey v7.7.1--beta6
   * Copyright 2022-2026 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const o=document.createElement("template");o.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class c extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const o=document.createElement("template");o.innerHTML=`
     <style class="styles">
-    @layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:is(button,[type=button],[type=reset],[type=submit]):not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete:before,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 7 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 7 Pro"}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{--fa-width: 1em;font-family:"Font Awesome 7 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 7 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}@layer elements{.container{display:block;margin-left:auto;margin-right:auto;container-type:inline-size;width:100%}.container:not([class*=col-]){grid-column:container !important;padding:var(--container-padding)}.container:not(:has(.row)):has([class*=col-]){display:grid;grid-template-columns:[content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end];column-gap:1rem}.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child){--col-start: auto}@media screen and (min-width: 36em){.container [class*=sm-col-span-]:not(:first-child){--col-start: auto}}@media screen and (min-width: 62em){.container [class*=md-col-span-]:not(:first-child){--col-start: auto}}.container:not(.container-fluid){max-width:var(--container-max-width)}.container .container:not(.container-xs-breakout){padding-left:0;padding-right:0;padding-bottom:0;padding-top:0}.container[class*=bg-]{padding-top:3rem;padding-bottom:2rem}.container[class*=bg-]+.container:not([class*=bg-]){padding-top:2rem}.container:before{display:table;clear:both;content:""}.container:after{display:table;clear:both;content:""}.container.container-xs-breakout{margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem)}@media screen and (min-width: 36em){.container.container-xs-breakout{margin-left:auto;margin-right:auto;width:100%}}:host .container{display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);width:100%}main>.row{padding-bottom:1rem}main>.row[class*=bg-]{padding-top:3rem;padding-bottom:2rem}main>.row[class*=bg-]+:is(.row,.container):not([class*=bg-]){padding-top:2rem}.container:has(.circle){position:relative;z-index:1}.container>.circle{position:absolute;z-index:var(--index-below);border-width:3px}.container:not([class*=circle-pattern-])>.circle{font-size:18.75rem;top:-4.6875rem;left:-12.5rem}.container:not([class*=circle-pattern-])>.circle~.circle{font-size:21.875rem;top:auto;left:auto;right:-6.25rem;bottom:-12.5rem}}@layer elements{:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.display-1,.display-2,.display-3,.display-4){margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:bold;color:var(--colour-heading);clear:both;display:block;& [class*=fa-]{margin-right:.5rem}}:is(.h1,h1){font-size:var(--h1-fs);line-height:var(--h1-lh);padding-bottom:var(--h1-pb);font-weight:900}:is(h2,.h2){font-size:var(--h2-fs);line-height:var(--h2-lh);padding-bottom:var(--h2-pb);font-weight:900}:is(h3,.h3){font-size:var(--h3-fs);line-height:var(--h3-lh);padding-bottom:var(--h3-pb);max-width:var(--content-max-width)}:is(.h4,h4,.h5,h5,.h6,h6){font-size:var(--h4-fs);line-height:var(--h4-lh);padding-bottom:var(--h4-pb);max-width:var(--content-max-width)}p{margin-top:0;font-size:var(--body-fs);line-height:1.5rem;padding-bottom:3rem;max-width:var(--content-max-width);margin-bottom:0}p:has(+p){padding-bottom:1.5rem}:is(.lead,.strapline){font-size:1.125rem;line-height:1.75rem;padding-bottom:3rem;max-width:var(--content-max-width);font-weight:700}small,.small{font-size:.875rem;line-height:1.5rem;padding-bottom:2rem;max-width:var(--content-max-width);font-weight:normal}.x-small{font-size:.625rem;line-height:1.5rem;padding-bottom:1rem;max-width:var(--content-max-width);font-weight:normal}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}strong{font-weight:bolder;font-family:var(--font-heading);color:var(--colour-heading)}address{margin-bottom:1rem;font-style:normal;line-height:inherit}blockquote{margin:0;quotes:"\u201C" "\u201D" "\u2018" "\u2019";padding-bottom:3rem;overflow:hidden;& p{font-size:1.5rem;line-height:2rem;padding-bottom:0}& p:first-child:before{content:open-quote}& p:last-of-type:after{content:close-quote}& cite{font-size:1.125rem;line-height:2rem;padding-bottom:0;font-weight:bold;font-style:normal}}mark{padding:.1875em;background-color:yellow}.stat{font-size:4rem;line-height:4.5rem;font-weight:bold;color:var(--colour-heading);display:block;text-decoration:underline;text-underline-offset:.75rem;text-decoration-color:var(--colour-secondary);text-decoration-thickness:.25rem;margin-bottom:4rem}}:host{--side-link-hover: light-dark(#eeeeee,var(--colour-canvas-2));grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.container.inline .side-menu{position:absolute;top:0}.side-menu{position:absolute;z-index:20;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:4.375rem;height:calc(100% - var(--nav-height));padding:0 2.5rem 0 0;transition:width 1s}.side-menu:before{content:"";position:absolute;z-index:1;top:0;right:2.5rem;height:100%;border-right:2px solid var(--colour-border)}@media screen and (min-width: 36em){.side-menu{left:0;width:5rem}}@media screen and (min-width: 62em){.side-menu{left:5.25rem;margin-left:-5.25rem;position:fixed;top:var(--nav-height)}.side-menu:not(.open).hover{width:21.5rem}.side-menu:not(.open).hover .btn[class*=fa-]:before{content:"\uF023" !important;transform:rotate(0)}}.side-menu .btn{display:var(--btn-display, block);position:absolute;top:2rem;right:2.5rem;margin-bottom:0;margin-right:-1.25rem;background-color:var(--colour-canvas-2);border:2px solid var(--colour-border);z-index:99;transition:opacity .2s}.side-menu .btn[aria-expanded][class*=fa-]:before{content:"\uF053" !important}@media screen and (min-width: 62em){.side-menu .btn[aria-expanded]{opacity:0}}.side-menu:is(:hover,:focus-within,:active) .btn{border:2px solid var(--colour-border);color:var(--colour-primary)}@media screen and (min-width: 62em){.side-menu:is(:hover,:focus-within,:active) .btn{opacity:1}}.side-menu:is(.open){width:calc(100% - var(--container-padding-x) + 2.5rem)}@media screen and (min-width: 36em){.side-menu:is(.open){width:26.375rem}}@media screen and (min-width: 62em){.side-menu:is(.open){width:21.5rem}}.side-menu .side-menu-content{position:absolute;top:0;right:2.5rem;padding:2rem 2.5rem 2.5rem 0;width:21.9375rem;background-color:var(--colour-canvas);opacity:0;transition:opacity 1s;min-height:100%;overflow:auto;max-height:100%;scrollbar-width:thin}.side-menu .side-menu-content .h3{padding-left:1.5rem}@media screen and (min-width: 36em){.side-menu .side-menu-content .h3{padding-left:2.5rem}.side-menu .side-menu-content{width:23.875rem}}@media screen and (min-width: 62em){.side-menu .side-menu-content{width:19rem}.side-menu .side-menu-content .h3{padding-left:var(--container-padding-x)}}.side-menu:not(.hover):not(.open) .side-menu-content.closed{display:none}.side-menu.open .side-menu-content{opacity:1}@media screen and (min-width: 62em){.side-menu.hover .side-menu-content{opacity:1}}.main-content{position:relative;z-index:10;padding-top:1.5rem;padding-left:3.75rem}@media screen and (min-width: 36em){.main-content{padding-left:5rem}}@media screen and (min-width: 62em){.main-content{padding-top:2.5rem !important;padding-left:0}}.main-content>span.h3{padding-top:.75rem;border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important}@media screen and (min-width: 62em){.main-content>span.h3{display:none}}::slotted(.main-content__title){border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important;max-width:100% !important;display:block}@media screen and (min-width: 62em){::slotted(.main-content__title){display:none}}@media screen and (min-width: 62em){.container:has(.side-menu.open){padding-left:2rem !important;margin-left:max(19rem,50% - var(--container-max-width)/2);margin-right:0;max-width:min(var(--container-max-width),100% - 19rem)}}@media screen and (min-width: 62em){:host([open-always]){--btn-display: none}}:host([inline]){width:100%;max-width:100%}@media screen and (min-width: 62em){:host([inline]){max-width:min(var(--container-max-width),100% - 19rem)}}:host([menu-right]) .container{padding-right:0 !important}@media screen and (min-width: 62em){:host([menu-right]) .container{padding-right:5.25rem !important}}@media screen and (min-width: 62em){:host([menu-right]) .container:has(.side-menu.open){margin-right:max(19rem,50% - var(--container-max-width)/2);margin-left:0}}:host([menu-right]) .side-menu{left:auto;right:-2.5rem;padding:0 0 0 2.5rem}@media screen and (min-width: 62em){:host([menu-right]) .side-menu{right:0}}:host([menu-right]) .side-menu::before{right:100%}:host([menu-right]) .side-menu .btn{right:100%}:host([menu-right]) .side-menu .btn:before{transform:rotate(180deg)}:host([menu-right]) .main-content{padding-left:var(--container-padding-x);padding-right:3.75rem}@media screen and (min-width: 36em){:host([menu-right]) .main-content{padding-right:5rem}}@media screen and (min-width: 62em){:host([menu-right]) .main-content{padding-right:0}}/*# sourceMappingURL=assets/css/components/collapsible-side.css.map */
+    @layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:"Font Awesome 7 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 7 Pro"}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:"Font Awesome 7 Pro";margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 7 Pro"}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important;option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important;&:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}&:hover{background:var(--colour-light) !important}&:after{content:attr(data-email)}}}select::picker-icon{display:none}select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0, 0, 0, 0.1);font-size:1rem}hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}select option::checkmark{display:none}select selectedcontent span{display:none}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}@layer elements{.container{display:block;margin-left:auto;margin-right:auto;container-type:inline-size;width:100%}.container:not([class*=col-]){grid-column:container !important;padding:var(--container-padding)}.container:not(:has(.row)):has([class*=col-]){display:grid;grid-template-columns:[content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end];column-gap:1rem}.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child){--col-start: auto}@media screen and (min-width: 36em){.container [class*=sm-col-span-]:not(:first-child){--col-start: auto}}@media screen and (min-width: 62em){.container [class*=md-col-span-]:not(:first-child){--col-start: auto}}.container:not(.container-fluid){max-width:var(--container-max-width)}.container .container:not(.container-xs-breakout){padding-left:0;padding-right:0;padding-bottom:0;padding-top:0}.container[class*=bg-]{padding-top:3rem;padding-bottom:2rem}.container[class*=bg-]+.container:not([class*=bg-]){padding-top:2rem}.container:before{display:table;clear:both;content:""}.container:after{display:table;clear:both;content:""}.container.container-xs-breakout{margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem)}@media screen and (min-width: 36em){.container.container-xs-breakout{margin-left:auto;margin-right:auto;width:100%}}:host .container{display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);width:100%}main>.row{padding-bottom:1rem}main>.row[class*=bg-]{padding-top:3rem;padding-bottom:2rem}main>.row[class*=bg-]+:is(.row,.container):not([class*=bg-]){padding-top:2rem}}@layer elements{:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,.display-1,.display-2,.display-3,.display-4){margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:bold;color:var(--colour-heading);clear:both;display:block;& [class*=fa-]{margin-right:.5rem}}:is(.h1,h1){font-size:var(--h1-fs);line-height:var(--h1-lh);padding-bottom:var(--h1-pb);font-weight:900}:is(h2,.h2){font-size:var(--h2-fs);line-height:var(--h2-lh);padding-bottom:var(--h2-pb);font-weight:900}:is(h3,.h3){font-size:var(--h3-fs);line-height:var(--h3-lh);padding-bottom:var(--h3-pb);max-width:var(--content-max-width)}:is(.h4,h4,.h5,h5,.h6,h6){font-size:var(--h4-fs);line-height:var(--h4-lh);padding-bottom:var(--h4-pb);max-width:var(--content-max-width)}p{margin-top:0;font-size:var(--body-fs);line-height:1.5rem;padding-bottom:3rem;max-width:var(--content-max-width);margin-bottom:0}p:has(+p){padding-bottom:1.5rem}:is(.lead,.strapline){font-size:1.125rem;line-height:1.75rem;padding-bottom:3rem;max-width:var(--content-max-width);font-weight:700}small,.small{font-size:.875rem;line-height:1.5rem;padding-bottom:2rem;max-width:var(--content-max-width);font-weight:normal}.x-small{font-size:.625rem;line-height:1.5rem;padding-bottom:1rem;max-width:var(--content-max-width);font-weight:normal}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}strong{font-weight:bolder;font-family:var(--font-heading);color:var(--colour-heading)}address{margin-bottom:1rem;font-style:normal;line-height:inherit}blockquote{margin:0;quotes:"\u201C" "\u201D" "\u2018" "\u2019";padding-bottom:3rem;overflow:hidden;& p{font-size:1.5rem;line-height:2rem;padding-bottom:0}& p:first-child:before{content:open-quote}& p:last-of-type:after{content:close-quote}& cite{font-size:1.125rem;line-height:2rem;padding-bottom:0;font-weight:bold;font-style:normal}}mark{padding:.1875em;background-color:yellow}.stat{font-size:4rem;line-height:4.5rem;font-weight:bold;color:var(--colour-heading);display:block;text-decoration:underline;text-underline-offset:.75rem;text-decoration-color:var(--colour-secondary);text-decoration-thickness:.25rem;margin-bottom:4rem}}:host{--side-link-hover: light-dark(#eeeeee,var(--colour-canvas-2));grid-column:full-width;display:block;min-height:calc(100vh - var(--nav-height));padding-top:0 !important;margin-inline:auto;width:100%;overflow:hidden;position:relative}@media screen and (min-width: 62em){:host{max-height:calc(100vh - var(--nav-height));overflow:auto}}.container{position:static;min-height:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important}@media screen and (min-width: 62em){.container{padding-left:5.25rem !important}}.container.inline .side-menu{position:absolute;top:0}.side-menu{position:absolute;z-index:20;top:0;left:0;height:100%;min-height:calc(100vh - var(--nav-height));width:4.375rem;height:calc(100% - var(--nav-height));padding:0 2.5rem 0 0;transition:width 1s}.side-menu:before{content:"";position:absolute;z-index:1;top:0;right:2.5rem;height:100%;border-right:2px solid var(--colour-border)}@media screen and (min-width: 36em){.side-menu{left:0;width:5rem}}@media screen and (min-width: 62em){.side-menu{left:5.25rem;margin-left:-5.25rem;position:fixed;top:var(--nav-height)}.side-menu:not(.open).hover{width:21.5rem}.side-menu:not(.open).hover .btn[class*=fa-]:before{content:"\uF023" !important;transform:rotate(0)}}.side-menu .btn{display:var(--btn-display, block);position:absolute;top:2rem;right:2.5rem;margin-bottom:0;margin-right:-1.25rem;background-color:var(--colour-canvas-2);border:2px solid var(--colour-border);z-index:99;transition:opacity .2s}.side-menu .btn[aria-expanded][class*=fa-]:before{content:"\uF053" !important}@media screen and (min-width: 62em){.side-menu .btn[aria-expanded]{opacity:0}}.side-menu:is(:hover,:focus-within,:active) .btn{border:2px solid var(--colour-border);color:var(--colour-primary)}@media screen and (min-width: 62em){.side-menu:is(:hover,:focus-within,:active) .btn{opacity:1}}.side-menu:is(.open){width:calc(100% - var(--container-padding-x) + 2.5rem)}@media screen and (min-width: 36em){.side-menu:is(.open){width:26.375rem}}@media screen and (min-width: 62em){.side-menu:is(.open){width:21.5rem}}.side-menu .side-menu-content{position:absolute;top:0;right:2.5rem;padding:2rem 2.5rem 2.5rem 0;width:21.9375rem;background-color:var(--colour-canvas);opacity:0;transition:opacity 1s;min-height:100%;overflow:auto;max-height:100%;scrollbar-width:thin}.side-menu .side-menu-content .h3{padding-left:1.5rem}@media screen and (min-width: 36em){.side-menu .side-menu-content .h3{padding-left:2.5rem}.side-menu .side-menu-content{width:23.875rem}}@media screen and (min-width: 62em){.side-menu .side-menu-content{width:19rem}.side-menu .side-menu-content .h3{padding-left:var(--container-padding-x)}}.side-menu:not(.hover):not(.open) .side-menu-content.closed{display:none}.side-menu.open .side-menu-content{opacity:1}@media screen and (min-width: 62em){.side-menu.hover .side-menu-content{opacity:1}}.main-content{position:relative;z-index:10;padding-top:1.5rem;padding-left:3.75rem}@media screen and (min-width: 36em){.main-content{padding-left:5rem}}@media screen and (min-width: 62em){.main-content{padding-top:2.5rem !important;padding-left:0}}.main-content>span.h3{padding-top:.75rem;border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important}@media screen and (min-width: 62em){.main-content>span.h3{display:none}}::slotted(.main-content__title){border-bottom:2px solid var(--colour-border);margin-bottom:2.5rem !important;max-width:100% !important;display:block}@media screen and (min-width: 62em){::slotted(.main-content__title){display:none}}@media screen and (min-width: 62em){.container:has(.side-menu.open){padding-left:2rem !important;margin-left:max(19rem,50% - var(--container-max-width)/2);margin-right:0;max-width:min(var(--container-max-width),100% - 19rem)}}@media screen and (min-width: 62em){:host([open-always]){--btn-display: none}}:host([inline]){width:100%;max-width:100%}@media screen and (min-width: 62em){:host([inline]){max-width:min(var(--container-max-width),100% - 19rem)}}:host([menu-right]) .container{padding-right:0 !important}@media screen and (min-width: 62em){:host([menu-right]) .container{padding-right:5.25rem !important}}@media screen and (min-width: 62em){:host([menu-right]) .container:has(.side-menu.open){margin-right:max(19rem,50% - var(--container-max-width)/2);margin-left:0}}:host([menu-right]) .side-menu{left:auto;right:-2.5rem;padding:0 0 0 2.5rem}@media screen and (min-width: 62em){:host([menu-right]) .side-menu{right:0}}:host([menu-right]) .side-menu::before{right:100%}:host([menu-right]) .side-menu .btn{right:100%}:host([menu-right]) .side-menu .btn:before{transform:rotate(180deg)}:host([menu-right]) .main-content{padding-left:var(--container-padding-x);padding-right:3.75rem}@media screen and (min-width: 36em){:host([menu-right]) .main-content{padding-right:5rem}}@media screen and (min-width: 62em){:host([menu-right]) .main-content{padding-right:0}}/*# sourceMappingURL=assets/css/components/collapsible-side.css.map */
 
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
@@ -22,5 +22,5 @@
         </div>
 
       </div>
-    `,this.shadowRoot&&this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){if(!this.shadowRoot)return;const o=this.shadowRoot.querySelector(".container"),t=this.shadowRoot.querySelector(".side-menu"),n=this.shadowRoot.querySelector(".side-menu-content"),s=this.shadowRoot.querySelector(".main-content"),i=this.shadowRoot.querySelector(".side-menu > .btn");if(!t||!n||!s||!i)return;if(this.hasAttribute("data-css")){const e=this.shadowRoot.querySelector(".styles");e&&e.insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`)}this.hasAttribute("data-title")||this.setAttribute("data-title","configuration"),n.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),s.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`);const d=this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)");d&&d.classList.add("h4","main-content__title"),this.hasAttribute("open")&&window.innerWidth>992&&(t.classList.add("open"),i.setAttribute("aria-expanded","true")),this.hasAttribute("inline")&&o.classList.add("inline"),this.hasAttribute("menu-right")&&t.classList.add("menu-right"),i.addEventListener("click",()=>{t.classList.contains("open")?(t.classList.remove("open"),i.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),t.classList.add("pe-none"),setTimeout(function(){t.classList.remove("pe-none")},1e3)):(n.classList.remove("closed"),setTimeout(function(){t.classList.add("open"),i.setAttribute("aria-expanded","true")},100))}),t.addEventListener("mouseenter",()=>{window.innerWidth>992&&(t.classList.contains("open")||n.classList.remove("closed"),t.classList.add("hover"))}),t.addEventListener("mousemove",()=>{window.innerWidth>992&&(t.classList.contains("open")||n.classList.remove("closed"))}),t.addEventListener("mouseleave",()=>{window.innerWidth>992&&(t.classList.remove("hover"),t.classList.contains("open")||setTimeout(function(){n.classList.add("closed")},1e3))});const r=this.querySelectorAll(".parent"),a=this.querySelectorAll(".parent > li:first-of-type");a?.forEach(e=>{e.addEventListener("click",()=>{if(!e||!e.parentElement)return!1;e.parentElement.classList.contains("reveal")?e.parentElement.classList.remove("reveal"):(r?.forEach(c=>{c.classList.remove("reveal")}),e.parentElement.classList.add("reveal"))})})}}export{m as default};
+    `,this.shadowRoot&&this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){if(!this.shadowRoot)return;const o=this.shadowRoot.querySelector(".container"),t=this.shadowRoot.querySelector(".side-menu"),n=this.shadowRoot.querySelector(".side-menu-content"),d=this.shadowRoot.querySelector(".main-content"),i=this.shadowRoot.querySelector(".side-menu > .btn");if(!t||!n||!d||!i)return;if(this.hasAttribute("data-css")){const e=this.shadowRoot.querySelector(".styles");e&&e.insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`)}this.hasAttribute("data-title")||this.setAttribute("data-title","configuration"),n.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`),d.insertAdjacentHTML("afterbegin",`<span class="h3">${this.getAttribute("data-title")}</span>`);const s=this.querySelector(":scope > :is(h1,h2,h3,h4,h5,h6)");s&&s.classList.add("h4","main-content__title"),this.hasAttribute("open")&&window.innerWidth>992&&(t.classList.add("open"),i.setAttribute("aria-expanded","true")),this.hasAttribute("inline")&&o.classList.add("inline"),this.hasAttribute("menu-right")&&t.classList.add("menu-right"),i.addEventListener("click",()=>{t.classList.contains("open")?(t.classList.remove("open"),i.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),t.classList.add("pe-none"),setTimeout(function(){t.classList.remove("pe-none")},1e3)):(n.classList.remove("closed"),setTimeout(function(){t.classList.add("open"),i.setAttribute("aria-expanded","true")},100))}),t.addEventListener("mouseenter",()=>{window.innerWidth>992&&(t.classList.contains("open")||n.classList.remove("closed"),t.classList.add("hover"))}),t.addEventListener("mousemove",()=>{window.innerWidth>992&&(t.classList.contains("open")||n.classList.remove("closed"))}),t.addEventListener("mouseleave",()=>{window.innerWidth>992&&(t.classList.remove("hover"),t.classList.contains("open")||setTimeout(function(){n.classList.add("closed")},1e3))});const r=this.querySelectorAll(".parent"),a=this.querySelectorAll(".parent > li:first-of-type");a?.forEach(e=>{e.addEventListener("click",()=>{if(!e||!e.parentElement)return!1;e.parentElement.classList.contains("reveal")?e.parentElement.classList.remove("reveal"):(r?.forEach(m=>{m.classList.remove("reveal")}),e.parentElement.classList.add("reveal"))})})}}export{c as default};
 //# sourceMappingURL=collapsible-side.component.min.js.map

package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          \n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        if (this.shadowRoot) {\n            this.shadowRoot.appendChild(template.content.cloneNode(true));\n        }\n    }\n    connectedCallback() {\n        if (!this.shadowRoot)\n            return;\n        const container = this.shadowRoot.querySelector('.container');\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        if (!sideMenu || !sideMenuContent || !mainContent || !button)\n            return;\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css')) {\n            const styles = this.shadowRoot.querySelector('.styles');\n            if (styles) {\n                styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n            }\n        }\n        // Set side nav title\n        if (!this.hasAttribute('data-title')) {\n            this.setAttribute('data-title', 'configuration');\n        }\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n        if (titleElement) {\n            titleElement.classList.add('h4', 'main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', 'true');\n        }\n        if (this.hasAttribute('inline')) {\n            container.classList.add('inline');\n        }\n        if (this.hasAttribute('menu-right')) {\n            sideMenu.classList.add('menu-right');\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', 'true');\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n        const sideMenuParentGroups = this.querySelectorAll('.parent');\n        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n            parentLink.addEventListener('click', () => {\n                if (!parentLink || !parentLink.parentElement)\n                    return false; // make sure elements exist\n                if (parentLink.parentElement.classList.contains('reveal')) {\n                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n                }\n                else {\n                    // remove other reveals and add reveal to this one\n                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n                        parentGroup.classList.remove('reveal');\n                    });\n                    parentLink.parentElement.classList.add('reveal');\n                }\n            });\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":"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"}
+{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style class=\"styles\">\r\n    ${loadCSS}\r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\r\n      <div class=\"container\" part=\"container\">\r\n\r\n        <div class=\"side-menu\" part=\"side-menu\">\r\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\r\n          \r\n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\r\n            <slot name=\"menu\"></slot>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"main-content\" part=\"main-content\">\r\n          <slot></slot>\r\n        </div>\r\n\r\n      </div>\r\n    `;\n        if (this.shadowRoot) {\n            this.shadowRoot.appendChild(template.content.cloneNode(true));\n        }\n    }\n    connectedCallback() {\n        if (!this.shadowRoot)\n            return;\n        const container = this.shadowRoot.querySelector('.container');\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        if (!sideMenu || !sideMenuContent || !mainContent || !button)\n            return;\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css')) {\n            const styles = this.shadowRoot.querySelector('.styles');\n            if (styles) {\n                styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n            }\n        }\n        // Set side nav title\n        if (!this.hasAttribute('data-title')) {\n            this.setAttribute('data-title', 'configuration');\n        }\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n        if (titleElement) {\n            titleElement.classList.add('h4', 'main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', 'true');\n        }\n        if (this.hasAttribute('inline')) {\n            container.classList.add('inline');\n        }\n        if (this.hasAttribute('menu-right')) {\n            sideMenu.classList.add('menu-right');\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', 'true');\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n        const sideMenuParentGroups = this.querySelectorAll('.parent');\n        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n            parentLink.addEventListener('click', () => {\n                if (!parentLink || !parentLink.parentElement)\n                    return false; // make sure elements exist\n                if (parentLink.parentElement.classList.contains('reveal')) {\n                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n                }\n                else {\n                    // remove other reveals and add reveal to this one\n                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n                        parentGroup.classList.remove('reveal');\n                    });\n                    parentLink.parentElement.classList.add('reveal');\n                }\n            });\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":"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"}

package/assets/js/components/config/config.component.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
-import { trackComponentRegistered } from '../_global.js';
+import { trackComponentRegistered } from '../_global';
 trackComponentRegistered('iam-config');
 class iamConfig extends HTMLElement {
     constructor() {
@@ -66,40 +66,40 @@ class iamConfig extends HTMLElement {
             return bucketElement;
         };
         this.addCriteriaHTML = (attributes) => {
-            return /*HTML*/ `<label>
-      <span class="visually-hidden">Attribute</span>
-      ${this.createCriteriaDropdown(attributes.attribute)}
-    </label>
-    <label>
-      <span class="visually-hidden">Rule</span>
-      <select name="rule" class="mt-0 select--sm">
-        <option value="set">is not empty</option>
-        <option value="empty">is empty</option>
-        <option value="equals">equals</option>
-        <option value="not">is not</option>
-        <option value="greater">greater than</option>
-        <option value="less">less than</option>
-      </select>
-    </label>
-    <label>
-      <span class="visually-hidden">Match</span>
-      <input type="text" name="match" class="mt-0 input--sm" /> <!-- TODO Add datalist or transform into select -->
-    </label>
-    <div class="btn__group">
-    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-plus" type="button" data-direction="add" title="Delete">Add</button>
-    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
+            return /*HTML*/ `<label>
+      <span class="visually-hidden">Attribute</span>
+      ${this.createCriteriaDropdown(attributes.attribute)}
+    </label>
+    <label>
+      <span class="visually-hidden">Rule</span>
+      <select name="rule" class="mt-0 select--sm">
+        <option value="set">is not empty</option>
+        <option value="empty">is empty</option>
+        <option value="equals">equals</option>
+        <option value="not">is not</option>
+        <option value="greater">greater than</option>
+        <option value="less">less than</option>
+      </select>
+    </label>
+    <label>
+      <span class="visually-hidden">Match</span>
+      <input type="text" name="match" class="mt-0 input--sm" /> <!-- TODO Add datalist or transform into select -->
+    </label>
+    <div class="btn__group">
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-plus" type="button" data-direction="add" title="Delete">Add</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
     </div>`;
         };
         this.addBucketHTML = (bucket) => {
             var _a, _b, _c;
-            return /*HTML*/ `<label>
-        <span class="visually-hidden">Name</span>
-        <input type="text" name="bucket" value="${(_b = (_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''}"/>
-      </label>
-      <div class="btn__group text-end"><button class="btn btn-compact btn-sm mt-0 btn-secondary fa-pen-to-square" data-expand title="Expand to see more options">Edit</button>${this.buttonHTML}</div>
-      <div class="criteria--container">
-      </div>
-      <div data-bucket="${(_c = bucket.id) !== null && _c !== void 0 ? _c : ''}" class="bucket">
+            return /*HTML*/ `<label>
+        <span class="visually-hidden">Name</span>
+        <input type="text" name="bucket" value="${(_b = (_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''}"/>
+      </label>
+      <div class="btn__group text-end"><button class="btn btn-compact btn-sm mt-0 btn-secondary fa-pen-to-square" data-expand title="Expand to see more options">Edit</button>${this.buttonHTML}</div>
+      <div class="criteria--container">
+      </div>
+      <div data-bucket="${(_c = bucket.id) !== null && _c !== void 0 ? _c : ''}" class="bucket">
       </div>`;
         };
         this.createCriteriaDropdown = (attribute) => {
@@ -110,9 +110,9 @@ class iamConfig extends HTMLElement {
             Object.keys(formDataObj).forEach(function (key) {
                 optionsHtml += `<option value="${key}" ${key == attribute ? ' selected="selected"' : ''}>${key}</option>`;
             });
-            return `<select name="attributes[criteria]" class="mt-0 select--sm">
-      <option value=""></option>
-      ${optionsHtml}
+            return `<select name="attributes[criteria]" class="mt-0 select--sm">
+      <option value=""></option>
+      ${optionsHtml}
     </select>`;
         };
         this.createEditBucketsEvents = (bucket) => {
@@ -229,22 +229,22 @@ class iamConfig extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/config.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = /* HTML */ `
-      <style>
-        ${loadCSS}
-      </style>
-      <div id="wrapper">
-        <div id="items">
-          <div id="buckets"></div>  
-          <div id="any" data-bucket="any"></div>
-        </div>
-        <div class="admin-panel">
-          <button class="btn btn-action fa-plus" command="add-bucket">Add bucket</button>
-          <button class="btn btn-action fa-plus" command="add-item">Add ${(_a = this.getAttribute('data-item-name')) !== null && _a !== void 0 ? _a : 'item'}</button> <!-- Changes to open a model if we want to validate the add form first -->
-
-        </div>
-        <button id="save" class="btn btn-sm btn-primary fa-floppy-disk" >Save items</button>
-      </div>
+        template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+      </style>
+      <div id="wrapper">
+        <div id="items">
+          <div id="buckets"></div>  
+          <div id="any" data-bucket="any"></div>
+        </div>
+        <div class="admin-panel">
+          <button class="btn btn-action fa-plus" command="add-bucket">Add bucket</button>
+          <button class="btn btn-action fa-plus" command="add-item">Add ${(_a = this.getAttribute('data-item-name')) !== null && _a !== void 0 ? _a : 'item'}</button> <!-- Changes to open a model if we want to validate the add form first -->
+
+        </div>
+        <button id="save" class="btn btn-sm btn-primary fa-floppy-disk" >Save items</button>
+      </div>
     `;
         (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(template.content.cloneNode(true));
     }
@@ -290,10 +290,10 @@ class iamConfig extends HTMLElement {
     connectedCallback() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e;
-            this.buttonHTML = /* HTML */ `
-    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
-    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-down" type="button" data-direction="down" title="Move down">Down</button>
-    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-up" type="button" data-direction="up" title="Move up">Up</button>
+            this.buttonHTML = /* HTML */ `
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-down" type="button" data-direction="down" title="Move down">Down</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-up" type="button" data-direction="up" title="Move up">Up</button>
     `;
             const dataImportUrl = this.getAttribute('data-import');
             const getBucketsData = this.getBucketsData;