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

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

@@ -1 +1 @@
-{"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'nav',\n});\nclass iamNav extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = 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/nav.component.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/nav.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n\n    \n    ${loadCSS}\n    </style>\n    <style class=\"doc-styles\">\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n    <div class=\"container\">\n      <slot name=\"logo\"></slot>\n      <div class=\"buttons-holder\"></div>\n      <button class=\"btn-menu\" part=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\n\n      <div class=\"menu__outer\">\n        <div class=\"menu closed\">\n            \n          <div class=\"menu__primary\">\n            <slot></slot>\n            <slot name=\"dual\"></slot>\n          </div>\n          <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\n          <slot name=\"actions\"></slot>\n          <div class=\"menu__secondary bg-light\">\n            <div class=\"container\">\n            <slot name=\"secondary\"></slot>\n            </div>\n          </div>\n        </div>\n        <slot name=\"menus\"></slot>\n      </div>      \n    </div>\n    <div class=\"backdrop\" part=\"backdrop\"></div>\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('navGlobal'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"navGlobal\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css'))\n            this.shadowRoot\n                .querySelector('.doc-styles')\n                .insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n        const menuButton = this.shadowRoot.querySelector('.btn-menu');\n        const menu = this.shadowRoot.querySelector('.menu');\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const iamNav = this;\n        const backdrop = this.shadowRoot.querySelector('.backdrop');\n        const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n        // Check the content\n        this.querySelectorAll(':scope > *').forEach(function (element) {\n            const tagname = element.tagName;\n            switch (tagname) {\n                case 'BUTTON':\n                    if (!element.hasAttribute('slot')) {\n                        element.setAttribute('slot', 'actions');\n                        menu.classList.add('has-actions');\n                    }\n                    break;\n            }\n            // Create menu button\n            if (element.classList.contains('nav--menu') &&\n                element.hasAttribute('data-title') &&\n                element.hasAttribute('data-icon')) {\n                const title = element.getAttribute('data-title');\n                const iconClass = element.getAttribute('data-icon');\n                // Create the menu button that sits seperately to the menu\n                const button = document.createElement('button');\n                button.setAttribute('slot', title);\n                button.classList.add('btn-menu');\n                button.setAttribute('part', 'btn-menu');\n                button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n                buttonsHolder.insertAdjacentElement('beforeend', button);\n                const mdButton = button.querySelector('.btn-primary');\n                // Make sure the menu is added to the right part of the component\n                element.setAttribute('slot', 'menus');\n                // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n                if (element.classList.contains('open')) {\n                    button.setAttribute('aria-expanded', true);\n                    mdButton.classList.toggle('active');\n                    iamNav.classList.add('open');\n                    backdrop.classList.add('show');\n                }\n                else {\n                    element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n                }\n                // Click event\n                button.addEventListener('click', function (e) {\n                    e.preventDefault();\n                    button.toggleAttribute('aria-expanded');\n                    element.classList.toggle('open');\n                    mdButton.classList.toggle('active');\n                    // Close desktop menus\n                    const openMenu = iamNav.querySelector(':scope > details[open]');\n                    if (openMenu)\n                        openMenu.removeAttribute('open');\n                    // Close the main menu and fix states on the button, iamNav component and backdrop\n                    if (element.classList.contains('open')) {\n                        menu.classList.remove('open');\n                        menuButton.removeAttribute('aria-expanded');\n                        setTimeout(function () {\n                            menu.classList.add('closed');\n                        }, 1000); // Delay until its close so the animation is broken\n                        iamNav.classList.add('open');\n                        backdrop.classList.add('show');\n                        element.classList.remove('closed');\n                    }\n                    else {\n                        iamNav.classList.remove('open');\n                        backdrop.classList.remove('show');\n                        setTimeout(function () {\n                            element.classList.add('closed');\n                        }, 1000);\n                    }\n                    // Close any open menus\n                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n                        if (openmenu != element) {\n                            openmenu.classList.remove('open');\n                        }\n                    });\n                    iamNav.shadowRoot\n                        .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')\n                        .forEach(function (selectedButton) {\n                        if (selectedButton != button) {\n                            selectedButton.removeAttribute('aria-expanded');\n                            const innerBtn = selectedButton.querySelector('.btn-primary');\n                            innerBtn.classList.remove('active');\n                        }\n                    });\n                }, false);\n            }\n        });\n        this.querySelectorAll('details').forEach(function (element) {\n            element.classList.add('details--revert');\n        });\n        // Has secondary link\n        if (this.querySelector('a[slot=\"secondary\"]')) {\n            menu.classList.add('has-secondary');\n        }\n        // Create a scroll width variable to help with the sizing of the menu with in the CSS\n        document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.offsetWidth + 'px');\n        // Open and close the menu\n        menuButton.addEventListener('click', function (e) {\n            e.preventDefault();\n            menuButton.toggleAttribute('aria-expanded');\n            menu.classList.toggle('open');\n            // Close any other menus\n            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                element.classList.remove('open');\n                setTimeout(function () {\n                    element.classList.add('closed');\n                }, 1000);\n            });\n            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                element.removeAttribute('aria-expanded');\n                const innerBtn = element.querySelector('.btn-primary');\n                innerBtn.classList.remove('active');\n            });\n            if (menu.classList.contains('open')) {\n                iamNav.classList.add('open');\n                menu.classList.remove('closed');\n            }\n            else {\n                iamNav.classList.remove('open');\n                setTimeout(function () {\n                    menu.classList.add('closed');\n                }, 1000);\n            }\n        }, false);\n        // Allow outside JS to close the menu\n        this.addEventListener('request-close', () => {\n            menuButton.removeAttribute('aria-expanded');\n            menu.classList.remove('open');\n            iamNav.classList.remove('open');\n        });\n        // Close the menu on the click of the backdrop on desktop\n        backdrop.addEventListener('click', () => {\n            const openMenu = this.querySelector('details[open] summary');\n            if (openMenu)\n                openMenu.click();\n            iamNav.classList.toggle('open');\n            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                element.classList.remove('open');\n            });\n            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                element.removeAttribute('aria-expanded');\n                const innerBtn = element.querySelector('.btn-primary');\n                innerBtn.classList.remove('active');\n            });\n            backdrop.classList.remove('show');\n        });\n        // On desktop close other menu's (details) when one is clicked\n        this.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n                if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {\n                    const summary = event.target.closest('summary');\n                    const details = summary.closest('details');\n                    const wrapper = details.parentNode;\n                    if (details.hasAttribute('open'))\n                        details.removeAttribute('open');\n                    else\n                        details.setAttribute('open', 'true');\n                    // Close any bespoke menus\n                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                        element.classList.remove('open');\n                        setTimeout(function () {\n                            menu.classList.add('closed');\n                        }, 1000);\n                    });\n                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                        element.removeAttribute('aria-expanded');\n                        const innerBtn = element.querySelector('.btn-primary');\n                        innerBtn.classList.remove('active');\n                    });\n                    // Close any other dropdowns on the same level\n                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {\n                        if (detailsArrayElement != details)\n                            detailsArrayElement.removeAttribute('open');\n                    });\n                    if (this.querySelectorAll(':scope > details[open]').length) {\n                        backdrop.classList.add('show');\n                        iamNav.classList.add('open');\n                    }\n                    else {\n                        backdrop.classList.remove('show');\n                        iamNav.classList.remove('open');\n                    }\n                    event.preventDefault();\n                }\n            }\n        });\n        // Mega menu title\n        this.querySelectorAll('details').forEach((detailsElement) => {\n            const summary = detailsElement.querySelector('summary');\n            const containerDiv = detailsElement.querySelector(':Scope > div');\n            containerDiv.setAttribute('data-title', summary.textContent);\n        });\n        // Search\n        if (this.querySelector('[slot=\"search\"]')) {\n            menu.classList.add('has-search');\n            const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n            searchWrapper.classList.remove('d-none');\n            searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\n      <dialog id=\"search-dialog\">\n      <div class=\"container\">\n        <div class=\"row\">\n          <div class=\"col mb-0 ms-auto col-md-7\">\n            <slot name=\"search\"></slot>\n          </div>\n          <div class=\"col d-none d-md-block mw-fit-content ms-3\">\n            <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\n          </div>\n        </div>\n      </div>\n      </dialog>`);\n            const searchButton = this.shadowRoot.querySelector('#search-button');\n            const searchClose = this.shadowRoot.querySelector('#search-close');\n            const searchDialog = this.shadowRoot.querySelector('#search-dialog');\n            if (this.hasAttribute('data-search-open')) {\n                searchDialog.setAttribute('open', 'open');\n                this.classList.add('search-open');\n                searchButton.setAttribute('aria-expanded', true);\n            }\n            searchButton.addEventListener('click', () => {\n                searchDialog.setAttribute('open', 'open');\n                this.classList.add('search-open');\n                searchButton.setAttribute('aria-expanded', true);\n            });\n            searchClose.addEventListener('click', () => {\n                searchDialog.removeAttribute('open');\n                this.classList.remove('search-open');\n                searchButton.removeAttribute('aria-expanded');\n            });\n        }\n        if (this.classList.contains('nav--sticky')) {\n            let oldScrollY = window.scrollY;\n            window.onscroll = function (e) {\n                if (oldScrollY < window.scrollY) {\n                    document.body.setAttribute('data-direction', 'down');\n                }\n                else {\n                    document.body.setAttribute('data-direction', 'up');\n                }\n                if (window.scrollY > 100) {\n                    document.body.classList.add('past100');\n                }\n                else {\n                    document.body.classList.remove('past100');\n                }\n                oldScrollY = window.scrollY;\n            };\n        }\n    }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog","oldScrollY"],"mappings":"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"}
+{"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'nav',\n});\nclass iamNav extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = 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/nav.component.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/nav.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style class=\"styles\">\r\n\r\n    \r\n    ${loadCSS}\r\n    </style>\r\n    <style class=\"doc-styles\">\r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\r\n    <div class=\"container\">\r\n      <slot name=\"logo\"></slot>\r\n      <div class=\"buttons-holder\"></div>\r\n      <button class=\"btn-menu\" part=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\r\n\r\n      <div class=\"menu__outer\">\r\n        <div class=\"menu closed\">\r\n            \r\n          <div class=\"menu__primary\">\r\n            <slot></slot>\r\n            <slot name=\"dual\"></slot>\r\n          </div>\r\n          <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\r\n          <slot name=\"actions\"></slot>\r\n          <div class=\"menu__secondary bg-light\">\r\n            <div class=\"container\">\r\n            <slot name=\"secondary\"></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <slot name=\"menus\"></slot>\r\n      </div>      \r\n    </div>\r\n    <div class=\"backdrop\" part=\"backdrop\"></div>\r\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('navGlobal'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"navGlobal\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css'))\n            this.shadowRoot\n                .querySelector('.doc-styles')\n                .insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n        const menuButton = this.shadowRoot.querySelector('.btn-menu');\n        const menu = this.shadowRoot.querySelector('.menu');\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const iamNav = this;\n        const backdrop = this.shadowRoot.querySelector('.backdrop');\n        const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n        // Check the content\n        this.querySelectorAll(':scope > *').forEach(function (element) {\n            const tagname = element.tagName;\n            switch (tagname) {\n                case 'BUTTON':\n                    if (!element.hasAttribute('slot')) {\n                        element.setAttribute('slot', 'actions');\n                        menu.classList.add('has-actions');\n                    }\n                    break;\n            }\n            // Create menu button\n            if (element.classList.contains('nav--menu') &&\n                element.hasAttribute('data-title') &&\n                element.hasAttribute('data-icon')) {\n                const title = element.getAttribute('data-title');\n                const iconClass = element.getAttribute('data-icon');\n                // Create the menu button that sits seperately to the menu\n                const button = document.createElement('button');\n                button.setAttribute('slot', title);\n                button.classList.add('btn-menu');\n                button.setAttribute('part', 'btn-menu');\n                button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n                buttonsHolder.insertAdjacentElement('beforeend', button);\n                const mdButton = button.querySelector('.btn-primary');\n                // Make sure the menu is added to the right part of the component\n                element.setAttribute('slot', 'menus');\n                // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n                if (element.classList.contains('open')) {\n                    button.setAttribute('aria-expanded', true);\n                    mdButton.classList.toggle('active');\n                    iamNav.classList.add('open');\n                    backdrop.classList.add('show');\n                }\n                else {\n                    element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n                }\n                // Click event\n                button.addEventListener('click', function (e) {\n                    e.preventDefault();\n                    button.toggleAttribute('aria-expanded');\n                    element.classList.toggle('open');\n                    mdButton.classList.toggle('active');\n                    // Close desktop menus\n                    const openMenu = iamNav.querySelector(':scope > details[open]');\n                    if (openMenu)\n                        openMenu.removeAttribute('open');\n                    // Close the main menu and fix states on the button, iamNav component and backdrop\n                    if (element.classList.contains('open')) {\n                        menu.classList.remove('open');\n                        menuButton.removeAttribute('aria-expanded');\n                        setTimeout(function () {\n                            menu.classList.add('closed');\n                        }, 1000); // Delay until its close so the animation is broken\n                        iamNav.classList.add('open');\n                        backdrop.classList.add('show');\n                        element.classList.remove('closed');\n                    }\n                    else {\n                        iamNav.classList.remove('open');\n                        backdrop.classList.remove('show');\n                        setTimeout(function () {\n                            element.classList.add('closed');\n                        }, 1000);\n                    }\n                    // Close any open menus\n                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n                        if (openmenu != element) {\n                            openmenu.classList.remove('open');\n                        }\n                    });\n                    iamNav.shadowRoot\n                        .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')\n                        .forEach(function (selectedButton) {\n                        if (selectedButton != button) {\n                            selectedButton.removeAttribute('aria-expanded');\n                            const innerBtn = selectedButton.querySelector('.btn-primary');\n                            innerBtn.classList.remove('active');\n                        }\n                    });\n                }, false);\n            }\n        });\n        this.querySelectorAll('details').forEach(function (element) {\n            element.classList.add('details--revert');\n        });\n        // Has secondary link\n        if (this.querySelector('a[slot=\"secondary\"]')) {\n            menu.classList.add('has-secondary');\n        }\n        // Create a scroll width variable to help with the sizing of the menu with in the CSS\n        document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.offsetWidth + 'px');\n        // Open and close the menu\n        menuButton.addEventListener('click', function (e) {\n            e.preventDefault();\n            menuButton.toggleAttribute('aria-expanded');\n            menu.classList.toggle('open');\n            // Close any other menus\n            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                element.classList.remove('open');\n                setTimeout(function () {\n                    element.classList.add('closed');\n                }, 1000);\n            });\n            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                element.removeAttribute('aria-expanded');\n                const innerBtn = element.querySelector('.btn-primary');\n                innerBtn.classList.remove('active');\n            });\n            if (menu.classList.contains('open')) {\n                iamNav.classList.add('open');\n                menu.classList.remove('closed');\n            }\n            else {\n                iamNav.classList.remove('open');\n                setTimeout(function () {\n                    menu.classList.add('closed');\n                }, 1000);\n            }\n        }, false);\n        // Allow outside JS to close the menu\n        this.addEventListener('request-close', () => {\n            menuButton.removeAttribute('aria-expanded');\n            menu.classList.remove('open');\n            iamNav.classList.remove('open');\n        });\n        // Close the menu on the click of the backdrop on desktop\n        backdrop.addEventListener('click', () => {\n            const openMenu = this.querySelector('details[open] summary');\n            if (openMenu)\n                openMenu.click();\n            iamNav.classList.toggle('open');\n            iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                element.classList.remove('open');\n            });\n            iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                element.removeAttribute('aria-expanded');\n                const innerBtn = element.querySelector('.btn-primary');\n                innerBtn.classList.remove('active');\n            });\n            backdrop.classList.remove('show');\n        });\n        // On desktop close other menu's (details) when one is clicked\n        this.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n                if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {\n                    const summary = event.target.closest('summary');\n                    const details = summary.closest('details');\n                    const wrapper = details.parentNode;\n                    if (details.hasAttribute('open'))\n                        details.removeAttribute('open');\n                    else\n                        details.setAttribute('open', 'true');\n                    // Close any bespoke menus\n                    iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n                        element.classList.remove('open');\n                        setTimeout(function () {\n                            menu.classList.add('closed');\n                        }, 1000);\n                    });\n                    iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n                        element.removeAttribute('aria-expanded');\n                        const innerBtn = element.querySelector('.btn-primary');\n                        innerBtn.classList.remove('active');\n                    });\n                    // Close any other dropdowns on the same level\n                    Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {\n                        if (detailsArrayElement != details)\n                            detailsArrayElement.removeAttribute('open');\n                    });\n                    if (this.querySelectorAll(':scope > details[open]').length) {\n                        backdrop.classList.add('show');\n                        iamNav.classList.add('open');\n                    }\n                    else {\n                        backdrop.classList.remove('show');\n                        iamNav.classList.remove('open');\n                    }\n                    event.preventDefault();\n                }\n            }\n        });\n        // Mega menu title\n        this.querySelectorAll('details').forEach((detailsElement) => {\n            const summary = detailsElement.querySelector('summary');\n            const containerDiv = detailsElement.querySelector(':Scope > div');\n            containerDiv.setAttribute('data-title', summary.textContent);\n        });\n        // Search\n        if (this.querySelector('[slot=\"search\"]')) {\n            menu.classList.add('has-search');\n            const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n            searchWrapper.classList.remove('d-none');\n            searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\r\n      <dialog id=\"search-dialog\">\r\n      <div class=\"container\">\r\n        <div class=\"row\">\r\n          <div class=\"col mb-0 ms-auto col-md-7\">\r\n            <slot name=\"search\"></slot>\r\n          </div>\r\n          <div class=\"col d-none d-md-block mw-fit-content ms-3\">\r\n            <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      </dialog>`);\n            const searchButton = this.shadowRoot.querySelector('#search-button');\n            const searchClose = this.shadowRoot.querySelector('#search-close');\n            const searchDialog = this.shadowRoot.querySelector('#search-dialog');\n            if (this.hasAttribute('data-search-open')) {\n                searchDialog.setAttribute('open', 'open');\n                this.classList.add('search-open');\n                searchButton.setAttribute('aria-expanded', true);\n            }\n            searchButton.addEventListener('click', () => {\n                searchDialog.setAttribute('open', 'open');\n                this.classList.add('search-open');\n                searchButton.setAttribute('aria-expanded', true);\n            });\n            searchClose.addEventListener('click', () => {\n                searchDialog.removeAttribute('open');\n                this.classList.remove('search-open');\n                searchButton.removeAttribute('aria-expanded');\n            });\n        }\n        if (this.classList.contains('nav--sticky')) {\n            let oldScrollY = window.scrollY;\n            window.onscroll = function (e) {\n                if (oldScrollY < window.scrollY) {\n                    document.body.setAttribute('data-direction', 'down');\n                }\n                else {\n                    document.body.setAttribute('data-direction', 'up');\n                }\n                if (window.scrollY > 100) {\n                    document.body.classList.add('past100');\n                }\n                else {\n                    document.body.classList.remove('past100');\n                }\n                oldScrollY = window.scrollY;\n            };\n        }\n    }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog","oldScrollY"],"mappings":"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"}

package/assets/js/components/notification/notification.component.js

@@ -1,5 +1,5 @@
-import setupNotification, { closeNotification } from '../../modules/notification.js';
-import { trackComponent, trackComponentRegistered } from '../_global.js';
+import setupNotification, { closeNotification } from '../../modules/notification';
+import { trackComponent, trackComponentRegistered } from '../_global';
 trackComponentRegistered('iam-notification');
 class iamNotification extends HTMLElement {
     constructor() {
@@ -45,18 +45,18 @@ class iamNotification extends HTMLElement {
         const loadCSS = `@import "${assetLocation}/css/components/notification.css";`;
         const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${loadCSS}
-    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
-    </style>
-
-    <div class="notification">
-      <div class="notification__icon"><slot name="icon"></slot></div>
-      <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
-      <div class="notification__dismiss"></div>
-    </div>
-    
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
+    </style>
+
+    <div class="notification">
+      <div class="notification__icon"><slot name="icon"></slot></div>
+      <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
+      <div class="notification__dismiss"></div>
+    </div>
+    
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
         // insert extra CSS

package/assets/js/components/notification/notification.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta4
+  * iamKey v7.7.1--beta6
   * Copyright 2022-2026 iamproperty
   */function l(e){if(e.hasAttribute("data-type")&&e.getAttribute("data-type")=="toast"){let i=document.querySelector(".notification__holder");i||(i=document.createElement("div"),i.classList.add("notification__holder"),i.classList.add("container"),document.querySelector("body").appendChild(i)),e.closest(".notification__holder")||i.appendChild(e)}if(e.setAttribute("role","alert"),e.addEventListener("click",function(i){event&&event.target instanceof HTMLElement&&(event.target.closest("[data-dismiss-button]")||event.target.matches("[data-dismiss-button]"))&&(i.preventDefault(),d(e))},!1),e.hasAttribute("data-timeout")){const i=e.getAttribute("data-timeout"),t=new f(function(){d(e)},i);e.addEventListener("mouseenter",()=>{t.pause()}),e.addEventListener("mouseleave",()=>{t.resume()})}}function f(e,i){let t,o,a=i;this.pause=function(){window.clearTimeout(t),a-=new Date-o},this.resume=function(){o=new Date,window.clearTimeout(t),t=window.setTimeout(e,a)},this.resume()}const d=function(e){e.classList.add("d-none")},m=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},u=(e,i,t)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:i}),t.forEach(o=>{e.addEventListener(o,function(a){const n={event:o,element:i,target:a.target};Object.keys(a.detail).forEach(s=>{const r=a.detail[s];n[s]=r}),window.dataLayer.push(n)})}),!0);m("iam-notification");class h extends HTMLElement{constructor(){super(),this.addColour=(t,o)=>{t.hasAttribute("data-type")?t.classList.add(`bg-${o}`):t.classList.add(`colour-${o}`)},this.addIcon=(t,o)=>{switch(o){case"danger":t.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>');break;case"warning":t.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>');break;case"success":t.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>');break;default:t.insertAdjacentHTML("beforeend",'<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>')}},this.addDismissBtn=t=>{var o;(o=t.shadowRoot.querySelector(".notification__dismiss"))===null||o===void 0||(o.innerHTML='<button data-dismiss-button part="dismiss-btn">Dismiss</button>'),t.shadowRoot.querySelector(".notification__dismiss [data-dismiss-button]").addEventListener("click",function(){d(t);const a=new CustomEvent("dismiss",{detail:{class:t.classList}});t.dispatchEvent(a)},!1)},this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const i=document.createElement("template");i.innerHTML=`
     <style>

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

@@ -1 +1 @@
-{"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","../_global.js","notification.component.js"],"sourcesContent":["function setupNotification(element) {\n    // Add toast to notification holder\n    if (element.hasAttribute('data-type') && element.getAttribute('data-type') == 'toast') {\n        let holder = document.querySelector('.notification__holder');\n        if (!holder) {\n            holder = document.createElement('div');\n            holder.classList.add('notification__holder');\n            holder.classList.add('container');\n            document.querySelector('body').appendChild(holder);\n        }\n        if (!element.closest('.notification__holder'))\n            holder.appendChild(element);\n    }\n    element.setAttribute('role', 'alert');\n    // Create a dissmissable button\n    element.addEventListener('click', function (e) {\n        if (event &&\n            event.target instanceof HTMLElement &&\n            (event.target.closest('[data-dismiss-button]') || event.target.matches('[data-dismiss-button]'))) {\n            e.preventDefault();\n            closeNotification(element);\n        }\n    }, false);\n    // Self disappearing alert\n    if (element.hasAttribute('data-timeout')) {\n        const timeOut = element.getAttribute('data-timeout');\n        const timer = new Timer(function () {\n            closeNotification(element);\n        }, timeOut);\n        element.addEventListener('mouseenter', () => {\n            timer.pause();\n        });\n        element.addEventListener('mouseleave', () => {\n            timer.resume();\n        });\n    }\n}\nfunction Timer(callback, delay) {\n    let timerId, start, remaining = delay;\n    this.pause = function () {\n        window.clearTimeout(timerId);\n        remaining -= new Date() - start;\n    };\n    this.resume = function () {\n        start = new Date();\n        window.clearTimeout(timerId);\n        timerId = window.setTimeout(callback, remaining);\n    };\n    this.resume();\n}\nexport const closeNotification = function (element) {\n    element.classList.add('d-none');\n};\nexport default setupNotification;\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 setupNotification, { closeNotification } from '../../modules/notification.js';\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-notification');\nclass iamNotification extends HTMLElement {\n    constructor() {\n        super();\n        this.addColour = (component, status) => {\n            if (component.hasAttribute('data-type'))\n                component.classList.add(`bg-${status}`);\n            else\n                component.classList.add(`colour-${status}`);\n        };\n        this.addIcon = (component, status) => {\n            switch (status) {\n                case 'danger':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                case 'warning':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                case 'success':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                default:\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>');\n            }\n        };\n        this.addDismissBtn = (component) => {\n            var _a;\n            (_a = component.shadowRoot.querySelector('.notification__dismiss')) === null || _a === void 0 ? void 0 : _a.innerHTML = `<button data-dismiss-button part=\"dismiss-btn\">Dismiss</button>`;\n            component.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener('click', function () {\n                closeNotification(component);\n                const customEvent = new CustomEvent('dismiss', {\n                    detail: {\n                        class: component.classList,\n                    },\n                });\n                component.dispatchEvent(customEvent);\n            }, false);\n        };\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/notification.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/notification.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\n    </style>\n\n    <div class=\"notification\">\n      <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\n      <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div><div class=\"notification__btns\"><slot name=\"btns\"></slot></div></div>\n      <div class=\"notification__dismiss\"></div>\n    </div>\n    \n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('notificationHolder'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"notificationHolder\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        var _a, _b, _c, _d;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const wrapper = this;\n        const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';\n        const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;\n        this.addColour(this, statusBG);\n        if (!this.querySelector('i')) {\n            this.addIcon(this, statusBG);\n        }\n        const buttons = this.querySelectorAll('a,button');\n        Array.from(buttons).forEach((button) => {\n            button.setAttribute('slot', 'btns');\n            button.classList.add('link');\n        });\n        if (buttons.length || this.hasAttribute('data-dismiss')) {\n            this.classList.add('notification--dismissable');\n        }\n        if (!buttons.length) {\n            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.notification__btns')) === null || _b === void 0 ? void 0 : _b.classList.add('empty');\n        }\n        else {\n            (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.notification__btns')) === null || _d === void 0 ? void 0 : _d.classList.remove('empty');\n        }\n        if (this.hasAttribute('data-dismiss')) {\n            this.addDismissBtn(this);\n        }\n        setupNotification(this);\n        trackComponent(this, 'iam-notification', ['dismiss']);\n    }\n    static get observedAttributes() {\n        return ['data-status', 'data-dismiss'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        var _a, _b;\n        switch (attrName) {\n            case 'data-status': {\n                if (oldVal != newVal) {\n                    this.classList.remove('bg-danger');\n                    this.classList.remove('bg-warning');\n                    this.classList.remove('bg-success');\n                    this.classList.remove('bg-white');\n                    (_a = this.querySelector('i')) === null || _a === void 0 ? void 0 : _a.remove();\n                    this.addColour(this, newVal);\n                    this.addIcon(this, newVal);\n                }\n                break;\n            }\n            case 'data-dismiss': {\n                if (oldVal != newVal) {\n                    if (this.hasAttribute('data-dismiss')) {\n                        this.addDismissBtn(this);\n                    }\n                    else {\n                        (_b = this.shadowRoot.querySelector('.notification__dismiss')) === null || _b === void 0 ? void 0 : _b.innerHTML = '';\n                    }\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","callback","delay","timerId","start","remaining","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamNotification","status","_a","customEvent","template","_b","_c","_d","defaultStatusBG","statusBG","buttons","button","attrName","oldVal","newVal"],"mappings":";;;IAAA,SAASA,EAAkBC,EAAS,CAEhC,GAAIA,EAAQ,aAAa,WAAW,GAAKA,EAAQ,aAAa,WAAW,GAAK,QAAS,CACnF,IAAIC,EAAS,SAAS,cAAc,uBAAuB,EACtDA,IACDA,EAAS,SAAS,cAAc,KAAK,EACrCA,EAAO,UAAU,IAAI,sBAAsB,EAC3CA,EAAO,UAAU,IAAI,WAAW,EAChC,SAAS,cAAc,MAAM,EAAE,YAAYA,CAAM,GAEhDD,EAAQ,QAAQ,uBAAuB,GACxCC,EAAO,YAAYD,CAAO,CAClC,CAYA,GAXAA,EAAQ,aAAa,OAAQ,OAAO,EAEpCA,EAAQ,iBAAiB,QAAS,SAAUE,EAAG,CACvC,OACA,MAAM,kBAAkB,cACvB,MAAM,OAAO,QAAQ,uBAAuB,GAAK,MAAM,OAAO,QAAQ,uBAAuB,KAC9FA,EAAE,eAAc,EAChBC,EAAkBH,CAAO,EAEjC,EAAG,EAAK,EAEJA,EAAQ,aAAa,cAAc,EAAG,CACtC,MAAMI,EAAUJ,EAAQ,aAAa,cAAc,EAC7CK,EAAQ,IAAIC,EAAM,UAAY,CAChCH,EAAkBH,CAAO,CAC7B,EAAGI,CAAO,EACVJ,EAAQ,iBAAiB,aAAc,IAAM,CACzCK,EAAM,MAAK,CACf,CAAC,EACDL,EAAQ,iBAAiB,aAAc,IAAM,CACzCK,EAAM,OAAM,CAChB,CAAC,CACL,CACJ,CACA,SAASC,EAAMC,EAAUC,EAAO,CAC5B,IAAIC,EAASC,EAAOC,EAAYH,EAChC,KAAK,MAAQ,UAAY,CACrB,OAAO,aAAaC,CAAO,EAC3BE,GAAa,IAAI,KAASD,CAC9B,EACA,KAAK,OAAS,UAAY,CACtBA,EAAQ,IAAI,KACZ,OAAO,aAAaD,CAAO,EAC3BA,EAAU,OAAO,WAAWF,EAAUI,CAAS,CACnD,EACA,KAAK,OAAM,CACf,CACO,MAAMR,EAAoB,SAAUH,EAAS,CAChDA,EAAQ,UAAU,IAAI,QAAQ,CAClC,ECpDaY,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,EACaC,EAAiB,CAACC,EAAWF,EAAeG,KAErD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,qBACP,QAASH,CACjB,CAAK,EACDG,EAAY,QAASC,GAAc,CAC/BF,EAAU,iBAAiBE,EAAW,SAAUC,EAAO,CACnD,MAAMC,EAAe,CACjB,MAAOF,EACP,QAASJ,EACT,OAAQK,EAAM,MAC9B,EACY,OAAO,KAAKA,EAAM,MAAM,EAAE,QAASE,GAAa,CAC5C,MAAMC,EAAcH,EAAM,OAAOE,CAAQ,EACzCD,EAAaC,CAAQ,EAAIC,CAC7B,CAAC,EACD,OAAO,UAAU,KAAKF,CAAY,CACtC,CAAC,CACL,CAAC,EACM,IC3BXP,EAAyB,kBAAkB,EAC3C,MAAMU,UAAwB,WAAY,CACtC,aAAc,CACV,MAAK,EACL,KAAK,UAAY,CAACP,EAAWQ,IAAW,CAChCR,EAAU,aAAa,WAAW,EAClCA,EAAU,UAAU,IAAI,MAAMQ,CAAM,EAAE,EAEtCR,EAAU,UAAU,IAAI,UAAUQ,CAAM,EAAE,CAClD,EACA,KAAK,QAAU,CAACR,EAAWQ,IAAW,CAClC,OAAQA,EAAM,CACV,IAAK,SACDR,EAAU,mBAAmB,YAAa,+EAA+E,EACzH,MACJ,IAAK,UACDA,EAAU,mBAAmB,YAAa,iFAAiF,EAC3H,MACJ,IAAK,UACDA,EAAU,mBAAmB,YAAa,yEAAyE,EACnH,MACJ,QACIA,EAAU,mBAAmB,YAAa,wEAAwE,CACtI,CACQ,EACA,KAAK,cAAiBA,GAAc,CAChC,IAAIS,GACHA,EAAKT,EAAU,WAAW,cAAc,wBAAwB,KAAO,MAAQS,IAAO,SAAkBA,EAAG,UAAY,mEACxHT,EAAU,WAAW,cAAc,8CAA8C,EAAE,iBAAiB,QAAS,UAAY,CACrHZ,EAAkBY,CAAS,EAC3B,MAAMU,EAAc,IAAI,YAAY,UAAW,CAC3C,OAAQ,CACJ,MAAOV,EAAU,SACzC,CACA,CAAiB,EACDA,EAAU,cAAcU,CAAW,CACvC,EAAG,EAAK,CACZ,EACA,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAIvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA,MAGvB,KAAK,aAAa,UAAU,EAAI,GAAG,KAAK,aAAa,UAAU,CAAC,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUrE,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,EAEvD,SAAS,eAAe,oBAAoB,GAC7C,SAAS,KAAK,mBAAmB,YAAa;AAAA,SAAwD,CAC9G,CACA,mBAAoB,CAChB,IAAIF,EAAIG,EAAIC,EAAIC,EAGhB,MAAMC,EAAkB,KAAK,aAAa,WAAW,EAAI,QAAU,OAC7DC,EAAW,KAAK,aAAa,aAAa,EAAI,KAAK,aAAa,aAAa,EAAID,EACvF,KAAK,UAAU,KAAMC,CAAQ,EACxB,KAAK,cAAc,GAAG,GACvB,KAAK,QAAQ,KAAMA,CAAQ,EAE/B,MAAMC,EAAU,KAAK,iBAAiB,UAAU,EAChD,MAAM,KAAKA,CAAO,EAAE,QAASC,GAAW,CACpCA,EAAO,aAAa,OAAQ,MAAM,EAClCA,EAAO,UAAU,IAAI,MAAM,CAC/B,CAAC,GACGD,EAAQ,QAAU,KAAK,aAAa,cAAc,IAClD,KAAK,UAAU,IAAI,2BAA2B,EAE7CA,EAAQ,QAIRH,GAAMD,EAAK,KAAK,cAAgB,MAAQA,IAAO,OAAS,OAASA,EAAG,cAAc,qBAAqB,KAAO,MAAQC,IAAO,QAAkBA,EAAG,UAAU,OAAO,OAAO,GAH1KF,GAAMH,EAAK,KAAK,cAAgB,MAAQA,IAAO,OAAS,OAASA,EAAG,cAAc,qBAAqB,KAAO,MAAQG,IAAO,QAAkBA,EAAG,UAAU,IAAI,OAAO,EAKxK,KAAK,aAAa,cAAc,GAChC,KAAK,cAAc,IAAI,EAE3B5B,EAAkB,IAAI,EACtBe,EAAe,KAAM,mBAAoB,CAAC,SAAS,CAAC,CACxD,CACA,WAAW,oBAAqB,CAC5B,MAAO,CAAC,cAAe,cAAc,CACzC,CACA,yBAAyBoB,EAAUC,EAAQC,EAAQ,CAC/C,IAAIZ,EAAIG,EACR,OAAQO,EAAQ,CACZ,IAAK,cAAe,CACZC,GAAUC,IACV,KAAK,UAAU,OAAO,WAAW,EACjC,KAAK,UAAU,OAAO,YAAY,EAClC,KAAK,UAAU,OAAO,YAAY,EAClC,KAAK,UAAU,OAAO,UAAU,GAC/BZ,EAAK,KAAK,cAAc,GAAG,KAAO,MAAQA,IAAO,QAAkBA,EAAG,OAAM,EAC7E,KAAK,UAAU,KAAMY,CAAM,EAC3B,KAAK,QAAQ,KAAMA,CAAM,GAE7B,KACJ,CACA,IAAK,eAAgB,CACbD,GAAUC,IACN,KAAK,aAAa,cAAc,EAChC,KAAK,cAAc,IAAI,GAGtBT,EAAK,KAAK,WAAW,cAAc,wBAAwB,KAAO,MAAQA,IAAO,SAAkBA,EAAG,UAAY,KAG3H,KACJ,CACZ,CACI,CACJ"}
+{"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","../_global.js","notification.component.js"],"sourcesContent":["function setupNotification(element) {\n    // Add toast to notification holder\n    if (element.hasAttribute('data-type') && element.getAttribute('data-type') == 'toast') {\n        let holder = document.querySelector('.notification__holder');\n        if (!holder) {\n            holder = document.createElement('div');\n            holder.classList.add('notification__holder');\n            holder.classList.add('container');\n            document.querySelector('body').appendChild(holder);\n        }\n        if (!element.closest('.notification__holder'))\n            holder.appendChild(element);\n    }\n    element.setAttribute('role', 'alert');\n    // Create a dissmissable button\n    element.addEventListener('click', function (e) {\n        if (event &&\n            event.target instanceof HTMLElement &&\n            (event.target.closest('[data-dismiss-button]') || event.target.matches('[data-dismiss-button]'))) {\n            e.preventDefault();\n            closeNotification(element);\n        }\n    }, false);\n    // Self disappearing alert\n    if (element.hasAttribute('data-timeout')) {\n        const timeOut = element.getAttribute('data-timeout');\n        const timer = new Timer(function () {\n            closeNotification(element);\n        }, timeOut);\n        element.addEventListener('mouseenter', () => {\n            timer.pause();\n        });\n        element.addEventListener('mouseleave', () => {\n            timer.resume();\n        });\n    }\n}\nfunction Timer(callback, delay) {\n    let timerId, start, remaining = delay;\n    this.pause = function () {\n        window.clearTimeout(timerId);\n        remaining -= new Date() - start;\n    };\n    this.resume = function () {\n        start = new Date();\n        window.clearTimeout(timerId);\n        timerId = window.setTimeout(callback, remaining);\n    };\n    this.resume();\n}\nexport const closeNotification = function (element) {\n    element.classList.add('d-none');\n};\nexport default setupNotification;\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 setupNotification, { closeNotification } from '../../modules/notification';\nimport { trackComponent, trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-notification');\nclass iamNotification extends HTMLElement {\n    constructor() {\n        super();\n        this.addColour = (component, status) => {\n            if (component.hasAttribute('data-type'))\n                component.classList.add(`bg-${status}`);\n            else\n                component.classList.add(`colour-${status}`);\n        };\n        this.addIcon = (component, status) => {\n            switch (status) {\n                case 'danger':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                case 'warning':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                case 'success':\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>');\n                    break;\n                default:\n                    component.insertAdjacentHTML('beforeend', '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>');\n            }\n        };\n        this.addDismissBtn = (component) => {\n            var _a;\n            (_a = component.shadowRoot.querySelector('.notification__dismiss')) === null || _a === void 0 ? void 0 : _a.innerHTML = `<button data-dismiss-button part=\"dismiss-btn\">Dismiss</button>`;\n            component.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener('click', function () {\n                closeNotification(component);\n                const customEvent = new CustomEvent('dismiss', {\n                    detail: {\n                        class: component.classList,\n                    },\n                });\n                component.dispatchEvent(customEvent);\n            }, false);\n        };\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/notification.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/notification.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${loadCSS}\r\n    ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\r\n    </style>\r\n\r\n    <div class=\"notification\">\r\n      <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\r\n      <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div><div class=\"notification__btns\"><slot name=\"btns\"></slot></div></div>\r\n      <div class=\"notification__dismiss\"></div>\r\n    </div>\r\n    \r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('notificationHolder'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"notificationHolder\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        var _a, _b, _c, _d;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const wrapper = this;\n        const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';\n        const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;\n        this.addColour(this, statusBG);\n        if (!this.querySelector('i')) {\n            this.addIcon(this, statusBG);\n        }\n        const buttons = this.querySelectorAll('a,button');\n        Array.from(buttons).forEach((button) => {\n            button.setAttribute('slot', 'btns');\n            button.classList.add('link');\n        });\n        if (buttons.length || this.hasAttribute('data-dismiss')) {\n            this.classList.add('notification--dismissable');\n        }\n        if (!buttons.length) {\n            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.notification__btns')) === null || _b === void 0 ? void 0 : _b.classList.add('empty');\n        }\n        else {\n            (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.notification__btns')) === null || _d === void 0 ? void 0 : _d.classList.remove('empty');\n        }\n        if (this.hasAttribute('data-dismiss')) {\n            this.addDismissBtn(this);\n        }\n        setupNotification(this);\n        trackComponent(this, 'iam-notification', ['dismiss']);\n    }\n    static get observedAttributes() {\n        return ['data-status', 'data-dismiss'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        var _a, _b;\n        switch (attrName) {\n            case 'data-status': {\n                if (oldVal != newVal) {\n                    this.classList.remove('bg-danger');\n                    this.classList.remove('bg-warning');\n                    this.classList.remove('bg-success');\n                    this.classList.remove('bg-white');\n                    (_a = this.querySelector('i')) === null || _a === void 0 ? void 0 : _a.remove();\n                    this.addColour(this, newVal);\n                    this.addIcon(this, newVal);\n                }\n                break;\n            }\n            case 'data-dismiss': {\n                if (oldVal != newVal) {\n                    if (this.hasAttribute('data-dismiss')) {\n                        this.addDismissBtn(this);\n                    }\n                    else {\n                        (_b = this.shadowRoot.querySelector('.notification__dismiss')) === null || _b === void 0 ? void 0 : _b.innerHTML = '';\n                    }\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","callback","delay","timerId","start","remaining","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamNotification","status","_a","customEvent","template","_b","_c","_d","defaultStatusBG","statusBG","buttons","button","attrName","oldVal","newVal"],"mappings":"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"}

package/assets/js/components/pagination/pagination.component.js

@@ -7,42 +7,42 @@ class iamPagination extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/pagination.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${loadCSS}
-    
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="pagination d-none">
-  
-      <div class="minimal" part="minimal">
-        <div class="page-jump">
-          <div><select class="select--minimal"></select></div>
-          <span class="total-pages"></span>
-        </div>
-        
-        <button class="prev" disabled>Prev</button>
-        <button class="next" disabled>Next</button>
-      </div>
-
-      <div class="item-count" part="item-count"></div>
-      <div class="per-page" part="per-page">
-        <div>
-          <select class="select--minimal">
-            <option value="15">15</option>
-            <option value="25">25</option>
-            <option value="40">40</option>
-            <option value="50">50</option>
-          </select>
-        </div>
-        <span> / page</span>
-      </div>
-      <div class="mobile-controls m-auto text-center">
-        <i class="fa-solid fa-spinner fa-spin"></i>
-        <button class="load-more btn btn-primary m-auto">Load more</a>
-      </div>
-    </div>
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="pagination d-none">
+  
+      <div class="minimal" part="minimal">
+        <div class="page-jump">
+          <div><select class="select--minimal"></select></div>
+          <span class="total-pages"></span>
+        </div>
+        
+        <button class="prev" disabled>Prev</button>
+        <button class="next" disabled>Next</button>
+      </div>
+
+      <div class="item-count" part="item-count"></div>
+      <div class="per-page" part="per-page">
+        <div>
+          <select class="select--minimal">
+            <option value="15">15</option>
+            <option value="25">25</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+        <span> / page</span>
+      </div>
+      <div class="mobile-controls m-auto text-center">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+        <button class="load-more btn btn-primary m-auto">Load more</a>
+      </div>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
@@ -136,9 +136,9 @@ class iamPagination extends HTMLElement {
         const defaultValues = [15, 25, 40, 50];
         // Update the per page options if needed
         if (increment && perPage.value != increment && !defaultValues.includes(increment)) {
-            perPage.innerHTML = `<option value="${increment}">${increment}</option>
-      <option value="${increment * 2}">${increment * 2}</option>
-      <option value="${increment * 3}">${increment * 3}</option>
+            perPage.innerHTML = `<option value="${increment}">${increment}</option>
+      <option value="${increment * 2}">${increment * 2}</option>
+      <option value="${increment * 3}">${increment * 3}</option>
       <option value="${increment * 4}">${increment * 4}</option>`;
         }
         perPage.value = increment;