@iamproperty/components 7.6.4--beta1 → 7.6.4--beta3

package/assets/js/scripts.bundle.min.js.map

@@ -1 +1 @@
-{"version":3,"names":["window","triggerDynamicEvent","element","event","arguments","length","undefined","console","log","hasAttribute","splitEvents","getAttribute","events","parentNode","Array","from","JSON","parse","forEach","checkConditions","matches","value","runEvent","match","document","querySelector","concat","eventType","target","hideElement","classList","add","querySelectorAll","input","removeAttribute","showElement","remove","closest","setAttribute","populateForm","theEvent","Event","dispatchEvent","attribute","focus","changeEvent","submit","location","href","values","form","Object","keys","field","getElementById","tagName","innerHTML","disabled","checked","addEventListener","__awaiter","thisArg","_arguments","generator","body","checkElements","dataLayer","push","pageTitle","title","detailsTitle","textContent","summary","link","button","linkText","class","buttonText","HTMLElement","navigator","userAgent","indexOf","appVersion","hash","label","replace","dialog","detail","click","showModal","addAttribute","state","type","pageInput","page","_a","scrollIntoView","preventDefault","e","key","stopPropagation","progress","P","Promise","resolve","reject","fulfilled","step","next","rejected","throw","result","done","adopt","then","apply"],"sources":["modules/dynamicEvents.js","scripts.js","modules/helpers.js","modules/data-layer.js"],"sourcesContent":["// Create the event listeners\nwindow.triggerDynamicEvent = (element, event = 'change') => {\n    console.log('event');\n    if (element.hasAttribute('data-change-events') && event == 'change')\n        splitEvents(element, element.getAttribute('data-change-events'));\n    if (element.hasAttribute('data-click-events') && event == 'click')\n        splitEvents(element, element.getAttribute('data-click-events'));\n};\nconst createDynamicEvents = () => {\n    // Change event\n    document.addEventListener('change', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))\n            splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));\n    });\n    document.addEventListener('keyup', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))\n            splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));\n    });\n    // Click event\n    document.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-click-events]'))\n            splitEvents(event.target, event.target.closest('[data-click-events]').getAttribute('data-click-events'));\n    });\n};\n// Parse the JSON and trigger the events, this may be singular or multiple set of events\nconst splitEvents = (element, events) => {\n    // an empty events will trigger looking up the dom chain for\n    if (!events) {\n        events = element.parentNode.getAttribute('data-change-events');\n    }\n    // If still empty bail out\n    if (!events)\n        return false;\n    // Split out each event\n    Array.from(JSON.parse(events)).forEach((event) => {\n        checkConditions(element, event);\n    });\n};\nconst checkConditions = (element, event) => {\n    if ('matches' in event) {\n        if (event['matches'] == 'any')\n            runEvent(element, event, 'if');\n        else if (element.value == event.matches)\n            runEvent(element, event, 'if');\n        else\n            runEvent(element, event, 'else');\n        return false;\n    }\n    else if ('in-list' in event) {\n        // Pass the matched datalist element instead of the triggered element\n        const match = document.querySelector(`${event['in-list']} option[value=\"${element.value}\"]`);\n        if (document.querySelector(`${event['in-list']} option[value=\"${element.value}\"]`)) {\n            runEvent(match, event, 'if');\n        }\n        else\n            runEvent(match, event, 'else');\n        return false;\n    }\n    else if ('event' in event) {\n        runEvent(element, event, 'event');\n    }\n};\nconst runEvent = (element, event, eventType) => {\n    if (eventType in event == false)\n        return false;\n    switch (event[eventType]) {\n        case 'hide':\n            if (document.querySelector(event['target'])) {\n                const hideElement = document.querySelector(event['target']);\n                hideElement.classList.add('js-hide');\n                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input) => {\n                    input.removeAttribute('required');\n                });\n            }\n            break;\n        case 'show':\n            if (document.querySelector(event['target'])) {\n                const showElement = document.querySelector(event['target']);\n                showElement.classList.remove('js-hide');\n                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input) => {\n                    if (!input.closest('.js-hide'))\n                        input.setAttribute('required', 'true');\n                });\n            }\n            break;\n        case 'populate-form':\n            populateForm(element, event);\n            break;\n        case 'dispatchEvent':\n            const theEvent = new Event(event['value']);\n            document.querySelector(`${event['target']}`).dispatchEvent(theEvent);\n            break;\n        case 'setAttribute':\n            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {\n                element.setAttribute(event['attribute'], event['value']);\n            });\n            break;\n        case 'focus':\n            document.querySelector(`${event['target']}`).focus();\n            break;\n        case 'removeAttribute':\n            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {\n                element.removeAttribute(event['attribute']);\n            });\n            break;\n        case 'updateValue':\n            document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : '';\n            const changeEvent = new Event('change');\n            document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);\n            break;\n        case 'submitForm':\n            document.querySelector(`${event['target']}`).submit();\n            break;\n        case 'openLink':\n            if (document.querySelector(`${event['target']}`).value)\n                window.location.href = document.querySelector(`${event['target']}`).value;\n            break;\n        default:\n            break;\n    }\n};\nconst populateForm = function (element, event) {\n    const values = JSON.parse(element.getAttribute('data-values'));\n    const form = document.querySelector(event['target']);\n    if (!values)\n        return false;\n    Object.keys(values).forEach((field) => {\n        if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')\n            document.getElementById(field).innerHTML = values[field];\n        if (form.querySelector(`select[name=\"${field}\"] [value=\"${values[field]}\"]`)) {\n            form.querySelector(`select[name=\"${field}\"]`).value = values[field];\n            if (element.hasAttribute('data-lock-fields'))\n                form.querySelector(`select[name=\"${field}\"]`).disabled = true;\n        }\n        else if (form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`)) {\n            Array.from(form.querySelectorAll(`input[name=\"${field}\"][type=\"radio\"]`)).forEach(function (input) {\n                input.disabled = true;\n            });\n            form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`).checked = true;\n            form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`).disabled = false;\n        }\n        else if (form.querySelector(`input[name=\"${field}\"]`)) {\n            form.querySelector(`input[name=\"${field}\"]`).value = values[field];\n            if (element.hasAttribute('data-lock-fields'))\n                form.querySelector(`input[name=\"${field}\"]`).setAttribute('readonly', 'true');\n        }\n    });\n};\nexport default createDynamicEvents;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n// Modules\nimport * as helpers from './modules/helpers.js';\nimport createDataLayer from './modules/data-layer.js';\nimport createDynamicEvents from './modules/dynamicEvents.js';\nconst components = [\n    'accordion',\n    'header',\n    'table',\n    'table-basic',\n    'table-no-submit',\n    'tabs',\n    'card',\n    'calendar',\n    'content',\n    'filter-card',\n    'video-card',\n    'record-card',\n    'filterlist',\n    'applied-filters',\n    'pagination',\n    'notification',\n    'actionbar',\n    'nav',\n    'collapsible-side',\n    'address-lookup',\n    'fileupload',\n    'search',\n    'inline-edit',\n    'multiselect',\n    'multi-step',\n    'menu',\n    'slider',\n    'carousel',\n    'marketing',\n    'barchart',\n    'doughnutchart',\n    'bento-grid',\n    'milestone-group',\n    'milestone',\n    'darkmode',\n    'password-indicator'\n];\n// Attach classes to dom elements\ndocument.addEventListener('DOMContentLoaded', () => __awaiter(void 0, void 0, void 0, function* () {\n    createDataLayer();\n    createDynamicEvents();\n    // Global stuff\n    helpers.addBodyClasses(document.body);\n    helpers.addGlobalEvents(document.body);\n    //extendDialogs(document.body);\n    //videoSupport(document.body);\n    /*\n    const prefix = 'iam';\n    const options = {\n      rootMargin: '50px',\n      threshold: 0.1,\n    };\n    const componentExt = '.component.min.js';\n  \n    // Load components - Each component will load once the first of its type has been loaded\n    components.forEach((component) => {\n      if (document.getElementsByTagName(`${prefix}-${component}`).length === 0) return;\n  \n      const callback = (entries: any): void => {\n        entries.forEach((entry: any) => {\n          if (entry.intersectionRatio > 0) {\n  \n            import(`../js/components/${component}/${component}${componentExt}`)\n              .then((module) => {\n                if (!window.customElements.get(`${prefix}-${component}`))\n                  window.customElements.define(`${prefix}-${component}`, module.default);\n              })\n              .catch((err) => {\n                console.log(err.message);\n              });\n  \n            intObserver.unobserve(entry.target);\n          }\n        });\n      };\n  \n      const intObserver = new IntersectionObserver(callback, options);\n      intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);\n    });\n    */\n}));\n","/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n    body.classList.add('js-enabled');\n    if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n        body.classList.add('ie');\n    }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n    const checkElements = function (hash) {\n        const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n        const summary = document.querySelector(hash + ' summary');\n        const dialog = document.querySelector(`dialog${hash}`);\n        const detail = document.querySelector(`detail${hash}`);\n        if (label instanceof HTMLElement)\n            label.click();\n        else if (summary instanceof HTMLElement)\n            summary.click();\n        else if (dialog instanceof HTMLElement)\n            dialog.showModal();\n        else if (detail instanceof HTMLElement)\n            detail.addAttribute('open');\n    };\n    if (location.hash)\n        checkElements(location.hash);\n    window.addEventListener('hashchange', function () {\n        checkElements(location.hash);\n    }, false);\n    addEventListener('popstate', (event) => {\n        if (event && event.state && event.state.type && event.state.type == 'pagination') {\n            const form = document.querySelector(`#${event.state.form}`);\n            const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n            if (pageInput)\n                pageInput.value = event.state.page;\n            else\n                form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n            form.dispatchEvent(new Event('submit'));\n        }\n    });\n    Array.from(document.querySelectorAll('form')).forEach((form) => {\n        form.addEventListener('submit', (event) => {\n            var _a;\n            if (form.querySelector(':invalid')) {\n                form.classList.add('was-validated');\n                (_a = form === null || form === void 0 ? void 0 : form.querySelector('input:invalid')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();\n                event.preventDefault();\n            }\n        });\n    });\n    document.addEventListener('click', (event) => {\n        var _a;\n        if (event && event.target instanceof HTMLElement && event.target.matches('form button:not([type=button])')) {\n            const form = event.target.closest('form');\n            // Reset password types\n            Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n                input.setAttribute('type', 'password');\n            });\n            if (form.querySelector(':invalid') ||\n                form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n                form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n                form.classList.add('was-validated');\n                (_a = form === null || form === void 0 ? void 0 : form.querySelector('input:invalid')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();\n                event.preventDefault();\n            }\n            if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n                form.classList.add('was-validated');\n                event.preventDefault();\n            }\n        }\n    });\n    document.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n                e.preventDefault();\n                e.stopPropagation();\n            }\n        }\n    });\n    Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n        const label = progress.closest('label');\n        label.setAttribute('data-percent', progress.getAttribute('value'));\n    });\n};\nexport const isNumeric = function (str) {\n    if (typeof str != 'string')\n        return false; // we only process strings!\n    return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n        !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n    .split(' ')\n    .map((s) => ucfirst(s))\n    .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n    str = str.toLowerCase();\n    str = snake(str);\n    str = str.replace(/\\W/g, '');\n    return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n    const convertStart = startDateString.split('/');\n    const convertEnd = endDateString.split('/');\n    const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n    const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n    if (dateStart == 'Invalid Date')\n        throw 'Start date is not a valid date';\n    if (dateEnd == 'Invalid Date')\n        throw 'End date is not a valid date';\n    // To calculate the time difference of two dates\n    const diffTime = dateEnd.getTime() - dateStart.getTime();\n    const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n    if (numberOfDays < 0)\n        throw 'The start date should be before the end date';\n    return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n    // eslint-disable-next-line no-useless-escape\n    .split(/[\\.\\[\\]\\'\\\"]/)\n    .filter((p) => p)\n    .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n    const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n    const pageWidth = window.innerWidth || document.body.clientWidth;\n    const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n    const x = touchendX - touchstartX;\n    const y = touchendY - touchstartY;\n    const xy = Math.abs(x / y);\n    const yx = Math.abs(y / x);\n    if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n        if (yx <= limit) {\n            if (x < 0) {\n                return 'left';\n            }\n            else {\n                return 'right';\n            }\n        }\n        if (xy <= limit) {\n            if (y < 0) {\n                return 'top';\n            }\n            else {\n                return 'bottom';\n            }\n        }\n    }\n    else {\n        return 'tap';\n    }\n};\nexport const uniqueID = (index = 1) => {\n    const ID = Math.floor(Math.random() * Date.now() * (index + 1));\n    return ID;\n};\nexport const isValidPostcode = (searchValue) => {\n    const regexp = /^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/gmi;\n    return regexp.test(searchValue.trim());\n};\n","function createDataLayer() {\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'Pageview',\n        pageTitle: document.title,\n    });\n    document.addEventListener('click', (event) => {\n        const target = event.target.closest('[open] summary');\n        if (target) {\n            window.dataLayer.push({\n                event: 'closeDetails',\n                detailsTitle: target.textContent || '',\n            });\n        }\n        else {\n            const summary = event.target.closest('summary');\n            const link = event.target.closest('a');\n            const button = event.target.closest('button');\n            if (summary) {\n                window.dataLayer.push({\n                    event: 'openDetails',\n                    detailsTitle: summary.textContent || '',\n                });\n            }\n            if (link) {\n                window.dataLayer.push({\n                    event: 'linkClicked',\n                    linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',\n                    class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',\n                    href: link.getAttribute('href') || '',\n                });\n            }\n            if (button) {\n                window.dataLayer.push({\n                    event: 'buttonClicked',\n                    buttonText: button.textContent || '',\n                    class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',\n                });\n            }\n        }\n    });\n}\nexport default createDataLayer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["window","triggerDynamicEvent","element","event","arguments","length","undefined","console","log","hasAttribute","splitEvents","getAttribute","events","parentNode","Array","from","JSON","parse","forEach","checkConditions","matches","value","runEvent","match","document","querySelector","concat","eventType","target","hideElement","classList","add","querySelectorAll","input","removeAttribute","showElement","remove","closest","setAttribute","populateForm","theEvent","Event","dispatchEvent","attribute","focus","changeEvent","submit","location","href","values","form","Object","keys","field","getElementById","tagName","innerHTML","disabled","checked","addEventListener","__awaiter","thisArg","_arguments","generator","body","checkElements","dataLayer","push","pageTitle","title","detailsTitle","textContent","summary","link","button","linkText","class","buttonText","HTMLElement","navigator","userAgent","indexOf","appVersion","hash","label","replace","dialog","detail","click","showModal","addAttribute","state","type","pageInput","page","_a","scrollIntoView","preventDefault","e","key","stopPropagation","progress","P","Promise","resolve","reject","fulfilled","step","next","rejected","throw","result","done","adopt","then","apply"],"sources":["modules/dynamicEvents.js","scripts.js","modules/helpers.js","modules/data-layer.js"],"sourcesContent":["// Create the event listeners\nwindow.triggerDynamicEvent = (element, event = 'change') => {\n    console.log('event');\n    if (element.hasAttribute('data-change-events') && event == 'change')\n        splitEvents(element, element.getAttribute('data-change-events'));\n    if (element.hasAttribute('data-click-events') && event == 'click')\n        splitEvents(element, element.getAttribute('data-click-events'));\n};\nconst createDynamicEvents = () => {\n    // Change event\n    document.addEventListener('change', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))\n            splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));\n    });\n    document.addEventListener('keyup', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-change-events]'))\n            splitEvents(event.target, event.target.closest('[data-change-events]').getAttribute('data-change-events'));\n    });\n    // Click event\n    document.addEventListener('click', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.closest('[data-click-events]'))\n            splitEvents(event.target, event.target.closest('[data-click-events]').getAttribute('data-click-events'));\n    });\n};\n// Parse the JSON and trigger the events, this may be singular or multiple set of events\nconst splitEvents = (element, events) => {\n    // an empty events will trigger looking up the dom chain for\n    if (!events) {\n        events = element.parentNode.getAttribute('data-change-events');\n    }\n    // If still empty bail out\n    if (!events)\n        return false;\n    // Split out each event\n    Array.from(JSON.parse(events)).forEach((event) => {\n        checkConditions(element, event);\n    });\n};\nconst checkConditions = (element, event) => {\n    if ('matches' in event) {\n        if (event['matches'] == 'any')\n            runEvent(element, event, 'if');\n        else if (element.value == event.matches)\n            runEvent(element, event, 'if');\n        else\n            runEvent(element, event, 'else');\n        return false;\n    }\n    else if ('in-list' in event) {\n        // Pass the matched datalist element instead of the triggered element\n        const match = document.querySelector(`${event['in-list']} option[value=\"${element.value}\"]`);\n        if (document.querySelector(`${event['in-list']} option[value=\"${element.value}\"]`)) {\n            runEvent(match, event, 'if');\n        }\n        else\n            runEvent(match, event, 'else');\n        return false;\n    }\n    else if ('event' in event) {\n        runEvent(element, event, 'event');\n    }\n};\nconst runEvent = (element, event, eventType) => {\n    if (eventType in event == false)\n        return false;\n    switch (event[eventType]) {\n        case 'hide':\n            if (document.querySelector(event['target'])) {\n                const hideElement = document.querySelector(event['target']);\n                hideElement.classList.add('js-hide');\n                Array.from(hideElement.querySelectorAll('[data-required]')).forEach((input) => {\n                    input.removeAttribute('required');\n                });\n            }\n            break;\n        case 'show':\n            if (document.querySelector(event['target'])) {\n                const showElement = document.querySelector(event['target']);\n                showElement.classList.remove('js-hide');\n                Array.from(showElement.querySelectorAll('[data-required]')).forEach((input) => {\n                    if (!input.closest('.js-hide'))\n                        input.setAttribute('required', 'true');\n                });\n            }\n            break;\n        case 'populate-form':\n            populateForm(element, event);\n            break;\n        case 'dispatchEvent':\n            const theEvent = new Event(event['value']);\n            document.querySelector(`${event['target']}`).dispatchEvent(theEvent);\n            break;\n        case 'setAttribute':\n            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {\n                element.setAttribute(event['attribute'], event['value']);\n            });\n            break;\n        case 'focus':\n            document.querySelector(`${event['target']}`).focus();\n            break;\n        case 'removeAttribute':\n            Array.from(document.querySelectorAll(`${event['target']}`)).forEach(function (element) {\n                element.removeAttribute(event['attribute']);\n            });\n            break;\n        case 'updateValue':\n            document.querySelector(`${event['target']}`).value = event['value'] ? event['value'] : '';\n            const changeEvent = new Event('change');\n            document.querySelector(`${event['target']}`).dispatchEvent(changeEvent);\n            break;\n        case 'submitForm':\n            document.querySelector(`${event['target']}`).submit();\n            break;\n        case 'openLink':\n            if (document.querySelector(`${event['target']}`).value)\n                window.location.href = document.querySelector(`${event['target']}`).value;\n            break;\n        default:\n            break;\n    }\n};\nconst populateForm = function (element, event) {\n    const values = JSON.parse(element.getAttribute('data-values'));\n    const form = document.querySelector(event['target']);\n    if (!values)\n        return false;\n    Object.keys(values).forEach((field) => {\n        if (document.getElementById(field) && document.getElementById(field).tagName == 'SPAN')\n            document.getElementById(field).innerHTML = values[field];\n        if (form.querySelector(`select[name=\"${field}\"] [value=\"${values[field]}\"]`)) {\n            form.querySelector(`select[name=\"${field}\"]`).value = values[field];\n            if (element.hasAttribute('data-lock-fields'))\n                form.querySelector(`select[name=\"${field}\"]`).disabled = true;\n        }\n        else if (form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`)) {\n            Array.from(form.querySelectorAll(`input[name=\"${field}\"][type=\"radio\"]`)).forEach(function (input) {\n                input.disabled = true;\n            });\n            form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`).checked = true;\n            form.querySelector(`input[name=\"${field}\"][type=\"radio\"][value=\"${values[field]}\"]`).disabled = false;\n        }\n        else if (form.querySelector(`input[name=\"${field}\"]`)) {\n            form.querySelector(`input[name=\"${field}\"]`).value = values[field];\n            if (element.hasAttribute('data-lock-fields'))\n                form.querySelector(`input[name=\"${field}\"]`).setAttribute('readonly', 'true');\n        }\n    });\n};\nexport default createDynamicEvents;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\n// Modules\nimport * as helpers from './modules/helpers.js';\nimport createDataLayer from './modules/data-layer.js';\nimport createDynamicEvents from './modules/dynamicEvents.js';\nconst components = [\n    'accordion',\n    'header',\n    'table',\n    'table-basic',\n    'table-no-submit',\n    'tabs',\n    'card',\n    'calendar',\n    'content',\n    'filter-card',\n    'video-card',\n    'record-card',\n    'filterlist',\n    'applied-filters',\n    'pagination',\n    'notification',\n    'actionbar',\n    'nav',\n    'collapsible-side',\n    'address-lookup',\n    'fileupload',\n    'search',\n    'inline-edit',\n    'multiselect',\n    'multi-step',\n    'menu',\n    'slider',\n    'carousel',\n    'marketing',\n    'barchart',\n    'doughnutchart',\n    'bento-grid',\n    'milestone-group',\n    'milestone',\n    'darkmode',\n    'password-indicator'\n];\n// Attach classes to dom elements\ndocument.addEventListener('DOMContentLoaded', () => __awaiter(void 0, void 0, void 0, function* () {\n    createDataLayer();\n    createDynamicEvents();\n    // Global stuff\n    helpers.addBodyClasses(document.body);\n    helpers.addGlobalEvents(document.body);\n    //extendDialogs(document.body);\n    //videoSupport(document.body);\n    /*\n    const prefix = 'iam';\n    const options = {\n      rootMargin: '50px',\n      threshold: 0.1,\n    };\n    const componentExt = '.component.min.js';\n  \n    // Load components - Each component will load once the first of its type has been loaded\n    components.forEach((component) => {\n      if (document.getElementsByTagName(`${prefix}-${component}`).length === 0) return;\n  \n      const callback = (entries: any): void => {\n        entries.forEach((entry: any) => {\n          if (entry.intersectionRatio > 0) {\n  \n            import(`../js/components/${component}/${component}${componentExt}`)\n              .then((module) => {\n                if (!window.customElements.get(`${prefix}-${component}`))\n                  window.customElements.define(`${prefix}-${component}`, module.default);\n              })\n              .catch((err) => {\n                console.log(err.message);\n              });\n  \n            intObserver.unobserve(entry.target);\n          }\n        });\n      };\n  \n      const intObserver = new IntersectionObserver(callback, options);\n      intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);\n    });\n    */\n}));\n","/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n    body.classList.add('js-enabled');\n    if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n        body.classList.add('ie');\n    }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n    const checkElements = function (hash) {\n        const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n        const summary = document.querySelector(hash + ' summary');\n        const dialog = document.querySelector(`dialog${hash}`);\n        const detail = document.querySelector(`detail${hash}`);\n        if (label instanceof HTMLElement)\n            label.click();\n        else if (summary instanceof HTMLElement)\n            summary.click();\n        else if (dialog instanceof HTMLElement)\n            dialog.showModal();\n        else if (detail instanceof HTMLElement)\n            detail.addAttribute('open');\n    };\n    if (location.hash)\n        checkElements(location.hash);\n    window.addEventListener('hashchange', function () {\n        checkElements(location.hash);\n    }, false);\n    addEventListener('popstate', (event) => {\n        if (event && event.state && event.state.type && event.state.type == 'pagination') {\n            const form = document.querySelector(`#${event.state.form}`);\n            const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n            if (pageInput)\n                pageInput.value = event.state.page;\n            else\n                form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n            form.dispatchEvent(new Event('submit'));\n        }\n    });\n    Array.from(document.querySelectorAll('form')).forEach((form) => {\n        if (!(form === null || form === void 0 ? void 0 : form.closest('iam-form'))) {\n            form.addEventListener('submit', (event) => {\n                var _a;\n                if (form.querySelector(':invalid')) {\n                    form.classList.add('was-validated');\n                    (_a = form === null || form === void 0 ? void 0 : form.querySelector('input:invalid')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();\n                    event.preventDefault();\n                }\n            });\n        }\n    });\n    document.addEventListener('click', (event) => {\n        var _a;\n        if (event && event.target instanceof HTMLElement && event.target.matches('form button:not([type=button])')) {\n            const form = event.target.closest('form');\n            if (!(form === null || form === void 0 ? void 0 : form.closest('iam-form'))) {\n                // Reset password types\n                Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n                    input.setAttribute('type', 'password');\n                });\n                if (form.querySelector(':invalid') ||\n                    form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n                    form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n                    form.classList.add('was-validated');\n                    (_a = form === null || form === void 0 ? void 0 : form.querySelector('input:invalid')) === null || _a === void 0 ? void 0 : _a.scrollIntoView();\n                    event.preventDefault();\n                }\n                if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n                    form.classList.add('was-validated');\n                    event.preventDefault();\n                }\n            }\n        }\n    });\n    document.addEventListener('keydown', (e) => {\n        if (e.key === 'Escape') {\n            if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n                e.preventDefault();\n                e.stopPropagation();\n            }\n        }\n    });\n    Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n        const label = progress.closest('label');\n        label.setAttribute('data-percent', progress.getAttribute('value'));\n    });\n};\nexport const isNumeric = function (str) {\n    if (typeof str != 'string')\n        return false; // we only process strings!\n    return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n        !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n    .split(' ')\n    .map((s) => ucfirst(s))\n    .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n    str = str.toLowerCase();\n    str = snake(str);\n    str = str.replace(/\\W/g, '');\n    return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n    const convertStart = startDateString.split('/');\n    const convertEnd = endDateString.split('/');\n    const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n    const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n    if (dateStart == 'Invalid Date')\n        throw 'Start date is not a valid date';\n    if (dateEnd == 'Invalid Date')\n        throw 'End date is not a valid date';\n    // To calculate the time difference of two dates\n    const diffTime = dateEnd.getTime() - dateStart.getTime();\n    const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n    if (numberOfDays < 0)\n        throw 'The start date should be before the end date';\n    return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n    // eslint-disable-next-line no-useless-escape\n    .split(/[\\.\\[\\]\\'\\\"]/)\n    .filter((p) => p)\n    .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n    const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n    const pageWidth = window.innerWidth || document.body.clientWidth;\n    const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n    const x = touchendX - touchstartX;\n    const y = touchendY - touchstartY;\n    const xy = Math.abs(x / y);\n    const yx = Math.abs(y / x);\n    if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n        if (yx <= limit) {\n            if (x < 0) {\n                return 'left';\n            }\n            else {\n                return 'right';\n            }\n        }\n        if (xy <= limit) {\n            if (y < 0) {\n                return 'top';\n            }\n            else {\n                return 'bottom';\n            }\n        }\n    }\n    else {\n        return 'tap';\n    }\n};\nexport const uniqueID = (index = 1) => {\n    const ID = Math.floor(Math.random() * Date.now() * (index + 1));\n    return ID;\n};\nexport const isValidPostcode = (searchValue) => {\n    const regexp = /^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/gmi;\n    return regexp.test(searchValue.trim());\n};\n","function createDataLayer() {\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'Pageview',\n        pageTitle: document.title,\n    });\n    document.addEventListener('click', (event) => {\n        const target = event.target.closest('[open] summary');\n        if (target) {\n            window.dataLayer.push({\n                event: 'closeDetails',\n                detailsTitle: target.textContent || '',\n            });\n        }\n        else {\n            const summary = event.target.closest('summary');\n            const link = event.target.closest('a');\n            const button = event.target.closest('button');\n            if (summary) {\n                window.dataLayer.push({\n                    event: 'openDetails',\n                    detailsTitle: summary.textContent || '',\n                });\n            }\n            if (link) {\n                window.dataLayer.push({\n                    event: 'linkClicked',\n                    linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',\n                    class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',\n                    href: link.getAttribute('href') || '',\n                });\n            }\n            if (button) {\n                window.dataLayer.push({\n                    event: 'buttonClicked',\n                    buttonText: button.textContent || '',\n                    class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',\n                });\n            }\n        }\n    });\n}\nexport default createDataLayer;\n"],"mappings":";;;;0FACAA,OAAOC,oBAAsB,SAACC,GAA8B,IAArBC,EAAKC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,SAC3CG,QAAQC,IAAI,SACRN,EAAQO,aAAa,uBAAkC,UAATN,GAC9CO,EAAYR,EAASA,EAAQS,aAAa,uBAC1CT,EAAQO,aAAa,sBAAiC,SAATN,GAC7CO,EAAYR,EAASA,EAAQS,aAAa,qBAClD,EACA,IAiBMD,EAAcA,CAACR,EAASU,KAM1B,GAJKA,IACDA,EAASV,EAAQW,WAAWF,aAAa,wBAGxCC,EACD,OAAO,EAEXE,MAAMC,KAAKC,KAAKC,MAAML,IAASM,QAASf,IACpCgB,EAAgBjB,EAASC,MAG3BgB,EAAkBA,CAACjB,EAASC,KAC9B,GAAI,YAAaA,EACb,MAAwB,OAApBA,EAAMiB,SAEDlB,EAAQmB,OAASlB,EAAMiB,QAD5BE,EAASpB,EAASC,EAAO,MAIzBmB,EAASpB,EAASC,EAAO,SACtB,EAEN,GAAI,YAAaA,EAAO,CAEzB,IAAMoB,EAAQC,SAASC,cAAa,GAAAC,OAAIvB,EAAM,WAAS,mBAACuB,OAAkBxB,EAAQmB,aAClF,OAAIG,SAASC,iBAAaC,OAAIvB,EAAM,WAAU,mBAAAuB,OAAkBxB,EAAQmB,MAAK,OACzEC,EAASC,EAAOpB,EAAO,MAGvBmB,EAASC,EAAOpB,EAAO,SACpB,CACX,CACS,UAAWA,GAChBmB,EAASpB,EAASC,EAAO,UAG3BmB,EAAWA,CAACpB,EAASC,EAAOwB,KAC9B,KAAIA,KAAaxB,GACb,OAAO,EACX,OAAQA,EAAMwB,IACV,IAAK,OACD,GAAIH,SAASC,cAActB,EAAMyB,QAAY,CACzC,IAAMC,EAAcL,SAASC,cAActB,EAAMyB,QACjDC,EAAYC,UAAUC,IAAI,WAC1BjB,MAAMC,KAAKc,EAAYG,iBAAiB,oBAAoBd,QAASe,IACjEA,EAAMC,gBAAgB,aAE9B,CACA,MACJ,IAAK,OACD,GAAIV,SAASC,cAActB,EAAMyB,QAAY,CACzC,IAAMO,EAAcX,SAASC,cAActB,EAAMyB,QACjDO,EAAYL,UAAUM,OAAO,WAC7BtB,MAAMC,KAAKoB,EAAYH,iBAAiB,oBAAoBd,QAASe,IAC5DA,EAAMI,QAAQ,aACfJ,EAAMK,aAAa,WAAY,SAE3C,CACA,MACJ,IAAK,gBACDC,EAAarC,EAASC,GACtB,MACJ,IAAK,gBACD,IAAMqC,EAAW,IAAIC,MAAMtC,EAAMkB,OACjCG,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAac,cAAcF,GAC3D,MACJ,IAAK,eACD1B,MAAMC,KAAKS,SAASQ,iBAAgB,GAAAN,OAAIvB,EAAMyB,UAAcV,QAAQ,SAAUhB,GAC1EA,EAAQoC,aAAanC,EAAMwC,UAAcxC,EAAMkB,MACnD,GACA,MACJ,IAAK,QACDG,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAagB,QAC7C,MACJ,IAAK,kBACD9B,MAAMC,KAAKS,SAASQ,iBAAgB,GAAAN,OAAIvB,EAAMyB,UAAcV,QAAQ,SAAUhB,GAC1EA,EAAQgC,gBAAgB/B,EAAMwC,UAClC,GACA,MACJ,IAAK,cACDnB,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAaP,MAAQlB,EAAMkB,MAAWlB,EAAMkB,MAAW,GACvF,IAAMwB,EAAc,IAAIJ,MAAM,UAC9BjB,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAac,cAAcG,GAC3D,MACJ,IAAK,aACDrB,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAakB,SAC7C,MACJ,IAAK,WACGtB,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAaP,QAC7CrB,OAAO+C,SAASC,KAAOxB,SAASC,cAAa,GAAAC,OAAIvB,EAAMyB,SAAaP,SAM9EkB,EAAe,SAAUrC,EAASC,GACpC,IAAM8C,EAASjC,KAAKC,MAAMf,EAAQS,aAAa,gBACzCuC,EAAO1B,SAASC,cAActB,EAAMyB,QAC1C,IAAKqB,EACD,OAAO,EACXE,OAAOC,KAAKH,GAAQ/B,QAASmC,IACrB7B,SAAS8B,eAAeD,IAAoD,QAA1C7B,SAAS8B,eAAeD,GAAOE,UACjE/B,SAAS8B,eAAeD,GAAOG,UAAYP,EAAOI,IAClDH,EAAKzB,cAAa,gBAAAC,OAAiB2B,EAAK,eAAA3B,OAAcuB,EAAOI,GAAM,QACnEH,EAAKzB,cAAa,gBAAAC,OAAiB2B,EAAK,OAAMhC,MAAQ4B,EAAOI,GACzDnD,EAAQO,aAAa,sBACrByC,EAAKzB,cAAa,gBAAAC,OAAiB2B,EAAK,OAAMI,UAAW,IAExDP,EAAKzB,cAAa,eAAAC,OAAgB2B,EAAK,4BAAA3B,OAA2BuB,EAAOI,GAAM,QACpFvC,MAAMC,KAAKmC,EAAKlB,gCAAgBN,OAAgB2B,EAAK,sBAAqBnC,QAAQ,SAAUe,GACxFA,EAAMwB,UAAW,CACrB,GACAP,EAAKzB,cAAa,eAAAC,OAAgB2B,8BAAK3B,OAA2BuB,EAAOI,GAAM,OAAMK,SAAU,EAC/FR,EAAKzB,cAAa,eAAAC,OAAgB2B,8BAAK3B,OAA2BuB,EAAOI,GAAM,OAAMI,UAAW,GAE3FP,EAAKzB,cAAa,eAAAC,OAAgB2B,EAAK,SAC5CH,EAAKzB,cAAa,eAAAC,OAAgB2B,EAAK,OAAMhC,MAAQ4B,EAAOI,GACxDnD,EAAQO,aAAa,qBACrByC,EAAKzB,cAAa,eAAAC,OAAgB2B,SAAWf,aAAa,WAAY,UAGtF,EC/FAd,SAASmC,iBAAiB,mBAAoB,KAAMC,OApDEC,OAoDQ,EApDCC,OAoDO,EApDQC,EAoDQ,YClCtDC,IACtBC,EAXqBD,ECP3BhE,OAAOkE,UAAYlE,OAAOkE,WAAa,GACvClE,OAAOkE,UAAUC,KAAK,CAClBhE,MAAO,WACPiE,UAAW5C,SAAS6C,QAExB7C,SAASmC,iBAAiB,QAAUxD,IAChC,IAAMyB,EAASzB,EAAMyB,OAAOS,QAAQ,kBACpC,GAAIT,EACA5B,OAAOkE,UAAUC,KAAK,CAClBhE,MAAO,eACPmE,aAAc1C,EAAO2C,aAAe,SAGvC,CACD,IAAMC,EAAUrE,EAAMyB,OAAOS,QAAQ,WAC/BoC,EAAOtE,EAAMyB,OAAOS,QAAQ,KAC5BqC,EAASvE,EAAMyB,OAAOS,QAAQ,UAChCmC,GACAxE,OAAOkE,UAAUC,KAAK,CAClBhE,MAAO,cACPmE,aAAcE,EAAQD,aAAe,KAGzCE,GACAzE,OAAOkE,UAAUC,KAAK,CAClBhE,MAAO,cACPwE,SAAUF,EAAKhE,aAAa,SAAWgE,EAAK9D,aAAa,UAAY,GAAK8D,EAAKF,aAAe,GAC9FK,MAAOH,EAAKhE,aAAa,UAAWgE,EAAK9D,aAAa,UAAY,GAClEqC,KAAMyB,EAAK9D,aAAa,SAAW,KAGvC+D,GACA1E,OAAOkE,UAAUC,KAAK,CAClBhE,MAAO,gBACP0E,WAAYH,EAAOH,aAAe,GAClCK,MAAOF,EAAOjE,aAAa,UAAWiE,EAAO/D,aAAa,UAAY,IAGlF,IH7BJa,SAASmC,iBAAiB,SAAWxD,IAC7BA,GAASA,EAAMyB,kBAAkBkD,aAAe3E,EAAMyB,OAAOS,QAAQ,yBACrE3B,EAAYP,EAAMyB,OAAQzB,EAAMyB,OAAOS,QAAQ,wBAAwB1B,aAAa,yBAE5Fa,SAASmC,iBAAiB,QAAUxD,IAC5BA,GAASA,EAAMyB,kBAAkBkD,aAAe3E,EAAMyB,OAAOS,QAAQ,yBACrE3B,EAAYP,EAAMyB,OAAQzB,EAAMyB,OAAOS,QAAQ,wBAAwB1B,aAAa,yBAG5Fa,SAASmC,iBAAiB,QAAUxD,IAC5BA,GAASA,EAAMyB,kBAAkBkD,aAAe3E,EAAMyB,OAAOS,QAAQ,wBACrE3B,EAAYP,EAAMyB,OAAQzB,EAAMyB,OAAOS,QAAQ,uBAAuB1B,aAAa,yBEbhEqD,EDgDJxC,SAASwC,MC/C3BlC,UAAUC,IAAI,gBACyB,IAAxCgD,UAAUC,UAAUC,QAAQ,SAAkBF,UAAUG,WAAWD,QAAQ,YAAc,IACzFjB,EAAKlC,UAAUC,IAAI,MAQjBkC,EAAgB,SAAUkB,GAC5B,IAAMC,EAAQ5D,SAASC,4BAAaC,OAAeyD,EAAKE,QAAQ,IAAK,IAAE,OACjEb,EAAUhD,SAASC,cAAc0D,EAAO,YACxCG,EAAS9D,SAASC,uBAAaC,OAAUyD,IACzCI,EAAS/D,SAASC,uBAAaC,OAAUyD,IAC3CC,aAAiBN,YACjBM,EAAMI,QACDhB,aAAmBM,YACxBN,EAAQgB,QACHF,aAAkBR,YACvBQ,EAAOG,YACFF,aAAkBT,aACvBS,EAAOG,aAAa,OAC5B,EACI3C,SAASoC,MACTlB,EAAclB,SAASoC,MAC3BnF,OAAO2D,iBAAiB,aAAc,WAClCM,EAAclB,SAASoC,KAC3B,GAAG,GACHxB,iBAAiB,WAAaxD,IAC1B,GAAIA,GAASA,EAAMwF,OAASxF,EAAMwF,MAAMC,MAA4B,cAApBzF,EAAMwF,MAAMC,KAAsB,CAC9E,IAAM1C,EAAO1B,SAASC,cAAa,IAAAC,OAAKvB,EAAMwF,MAAMzC,OAC9C2C,EAAYrE,SAASC,cAAa,IAAAC,OAAKvB,EAAMwF,MAAMzC,4BACrD2C,EACAA,EAAUxE,MAAQlB,EAAMwF,MAAMG,KAE9B5C,EAAKM,WAAS,kEAAA9B,OAAsEvB,EAAMwF,MAAMG,KAAI,QACxG5C,EAAKR,cAAc,IAAID,MAAM,UACjC,IAEJ3B,MAAMC,KAAKS,SAASQ,iBAAiB,SAASd,QAASgC,IACDA,GAAKb,QAAQ,aAC3Da,EAAKS,iBAAiB,SAAWxD,IAC7B,IAAI4F,EACA7C,EAAKzB,cAAc,cACnByB,EAAKpB,UAAUC,IAAI,iBACwE,QAA1FgE,EAAiD7C,GAAKzB,cAAc,wBAAqC,IAAPsE,GAAyBA,EAAGC,iBAC/H7F,EAAM8F,sBAKtBzE,SAASmC,iBAAiB,QAAUxD,IAChC,IAAI4F,EACJ,GAAI5F,GAASA,EAAMyB,kBAAkBkD,aAAe3E,EAAMyB,OAAOR,QAAQ,kCAAmC,CACxG,IAAM8B,EAAO/C,EAAMyB,OAAOS,QAAQ,QACgBa,GAAKb,QAAQ,cAE3DvB,MAAMC,KAAKmC,EAAKlB,iBAAiB,yBAAyBd,QAASe,IAC/DA,EAAMK,aAAa,OAAQ,eAE3BY,EAAKzB,cAAc,aACnByB,EAAKzB,cAAc,oCACnByB,EAAKzB,cAAc,sCACnByB,EAAKpB,UAAUC,IAAI,iBACwE,QAA1FgE,EAAiD7C,GAAKzB,cAAc,wBAAqC,IAAPsE,GAAyBA,EAAGC,iBAC/H7F,EAAM8F,kBAEN/C,EAAKzB,cAAc,mDACnByB,EAAKpB,UAAUC,IAAI,iBACnB5B,EAAM8F,kBAGlB,IAEJzE,SAASmC,iBAAiB,UAAYuC,IACpB,WAAVA,EAAEC,KACE3E,SAASC,cAAc,kEACvByE,EAAED,iBACFC,EAAEE,qBAIdtF,MAAMC,KAAKS,SAASQ,iBAAiB,mBAAmBd,QAASmF,IAC/CA,EAAShE,QAAQ,SACzBC,aAAa,eAAgB+D,EAAS1F,aAAa,WDAjE,EA5FW,KAFgE2F,OAoDG,KAlDxDA,EAAIC,UAAU,SAAUC,EAASC,GAC/C,SAASC,EAAUrF,GAAS,IAAMsF,EAAK5C,EAAU6C,KAAKvF,GAAS,OAAS6E,GAAKO,EAAOP,EAAI,CAAE,CAC1F,SAASW,EAASxF,GAAS,IAAMsF,EAAK5C,EAAU+C,MAASzF,GAAS,OAAS6E,GAAKO,EAAOP,EAAI,CAAE,CAC7F,SAASS,EAAKI,GAAUA,EAAOC,KAAOR,EAAQO,EAAO1F,OAJzD,SAAeA,GAAS,OAAOA,aAAiBiF,EAAIjF,EAAQ,IAAIiF,EAAE,SAAUE,GAAWA,EAAQnF,EAAQ,EAAI,CAIzC4F,CAAMF,EAAO1F,OAAO6F,KAAKR,EAAWG,EAAW,CAC7GF,GAAM5C,EAAYA,EAAUoD,MAAMtD,EAASC,GAAc,KAAK8C,OAClE,GAPwC,IAAU/C,EAASC,EAAYwC,EAAGvC,GA8F5E","ignoreList":[]}

package/assets/sass/_components.scss

@@ -6,8 +6,6 @@
 
 @use 'components/nav.preload';
 @use 'components/carousel.config';
-@use 'components/multiselect.preload';
-@use 'components/tag.preload';
 @use 'components/multi-step-modal.global';
 
 @use 'components/inline-edit.preload';

package/assets/sass/_elements.scss

@@ -27,3 +27,4 @@
 @use 'elements/progress.scss';
 @use 'elements/code';
 @use 'elements/highlight';
+@use 'elements/dropdown';

package/assets/sass/components/multiselect.preload.scss

@@ -1,63 +1,8 @@
 @use '../_func' as *;
 
-
-
-
-
 @layer components {
-  iam-multiselect .tag[slot='checked'] {
-    margin-bottom: 0.5rem;
-    order: var(--order, 1);
-    margin-inline: rem(3);
-
-    &:not(:has(i)):after {
-      content: '\2715';
-      margin-left: 0.6em;
-      font-weight: bold;
-    }
-  }
-
-  iam-multiselect .tag[slot='checked']:first-child:last-child {
-
-    margin-inline: 0;
-  }
-
-  iam-multiselect .tag:not([slot='checked']) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    text-align: left;
-    border-radius: 0;
-    padding-inline: 1rem;
-    outline: none;
-    padding-block: 0.5rem;
-
-    &:not(:hover, :focus, :active, :focus-within) {
-      background: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
 
-  iam-multiselect:has(label:not([slot='checked']):not([slot='notmatched'])) {
-    --display-panel: block;
-  }
 
-  iam-multiselect:has(label[slot='checked']) {
-    --display-button: block;
-  }
 
-  @container style(--theme: dark) {
-    iam-multiselect :is(.tag, .badge):not([slot='checked']) {
-      color: var(--colour-heading);
-    }
-  }
 
-  iam-multiselect[data-single] .tag[slot='checked'],
-  iam-multiselect[data-single] .tag[slot='checked'] * {
-    pointer-events: none!important;
-  }
 }

package/assets/sass/components/multiselect.scss

@@ -5,6 +5,7 @@
 @use '../elements/admin-panel.scss' as *;
 @use '../elements/buttons.scss' as *;
 @use '../elements/buttons--action.scss' as *;
+@use '../elements/dropdown.scss' as *;
 
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
@@ -15,227 +16,224 @@
   box-sizing: border-box;
 }
 
-:host {
+@layer components {
+  :host {
 
-  margin-bottom: 1.5rem;
-}
-
-.outer {
-  position: relative;
-  max-width: var(--input-max-width, 50rem);
-  display: block;
-}
-
-label {
-  margin-bottom: 0;
-  padding-bottom: 0.5rem;
-}
-
-.inner-label:empty {
-  display: none;
-}
-
-.wrapper {
-  max-width: var(--input-max-width, 50rem);
+    margin-bottom: 1.5rem;
+  }
 
-  &:after {
-    content: '';
+  .outer {
+    position: relative;
+    max-width: var(--input-max-width, 50rem);
     display: block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 1rem;
   }
 
-  input {
-    margin-bottom: 0.5rem;
+  label {
+    margin-bottom: 0;
+    padding-bottom: 0.5rem;
   }
 
-  .feedback {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    padding: 0.85rem;
-    width: min-content;
-    white-space: nowrap;
-    margin-bottom: 0.5rem;
+  .inner-label:empty {
     display: none;
   }
 
-  &.was-validated .feedback {
-    display: block;
-  }
-}
+  .wrapper {
+    max-width: var(--input-max-width, 50rem);
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 1rem;
+    }
 
-.wrapper {
+    input {
+      margin-bottom: 0.5rem;
+    }
 
-  input {
+    .feedback {
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+      padding: 0.85rem;
+      width: min-content;
+      white-space: nowrap;
+      margin-bottom: 0.5rem;
+      display: none;
+    }
 
-    margin-top: unset;
-  }
-}
-.wrapper.filled {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-  padding: 0.5rem 2rem 0 #{rem(13)};
-  font-size: var(--input-fs, 1rem);
-  line-height: var(--input-lh, 1.25rem);
-  color: var(--colour-body);
-  background-color: var(--colour-canvas-2);
-  border: 2px solid var(--colour-primary);
-  border-radius: 0.5rem;
-
-  &:is(:focus-within, .focus-within):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-  }
-
-  input {
-    all: unset;
-    font-size: 1rem;
-    line-height: rem(26);
-    display: var(--search-display,inline-block);
-    width: 0;
-    flex-grow: 1;
-    padding: 0 0.5rem 0 0 !important;
-    margin-inline: rem(3);
-    order: 999;
-    margin-bottom: 0.5rem;
+    &.was-validated .feedback {
+      display: block;
+    }
   }
 
-  .feedback {
-    display: none !important;
-  }
+  .wrapper {
+
+    input {
 
-  &:is(:focus, .focus):not(:disabled) {
-    border-color: var(--colour-info);
-    outline: 0;
-    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+      margin-top: unset;
+    }
   }
-}
+  .wrapper.filled {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
+    padding: 0.5rem 2rem 0 #{rem(13)};
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-body);
+    background-color: var(--colour-canvas-2);
+    border: 2px solid var(--colour-primary);
+    border-radius: 0.5rem;
+
+    &:is(:focus-within, .focus-within):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
 
-button {
-  position: absolute;
-  right: 0.5rem;
-  border: none;
-  padding-inline: 0.5rem;
-  display: var(--display-button, none);
+    input {
+      all: unset;
+      font-size: 1rem;
+      line-height: rem(26);
+      display: var(--search-display,inline-block);
+      width: 0;
+      flex-grow: 1;
+      padding: 0 0.5rem 0 0 !important;
+      margin-inline: rem(3);
+      order: 999;
+      margin-bottom: 0.5rem;
+    }
 
-  &:after {
-    content: '\2715';
-    font-weight: bold;
-  }
-}
+    .feedback {
+      display: none !important;
+    }
 
-.dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  padding: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  z-index: 99;
-  display: none;
-  max-height: rem(244) !important;
-  overflow: auto;
-
-  &:before {
-    display: none;
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
   }
-}
 
-.wrapper:is(:focus-within) .dropdown {
-  display: var(--display-panel, none);
-}
+  button {
+    position: absolute;
+    right: 0.5rem;
+    border: none;
+    padding-inline: 0.5rem;
+    display: var(--display-button, none);
 
-@media (hover: hover) {
-  .wrapper .dropdown:hover {
-    display: var(--display-panel, none);
+    &:after {
+      content: '\2715';
+      font-weight: bold;
+    }
   }
-}
 
-@media (hover: none) {
-  :host(.hover) .wrapper .dropdown {
-    display: block;
+  .wrapper:is(:focus-within) .dropdown {
+    display: var(--display-panel, none);
   }
-}
 
-// Inline edit
-:host-context(:focus-within) {
-  input {
-    background-color: none !important;
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
   }
-}
-:host-context(iam-inline-edit) {
-  display: block;
-  --display-btns: none;
 
-  label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
-  .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
-    background-color: var(--colour-light);
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
+  }
 
+  // Inline edit
+  :host-context(:focus-within) {
     input {
+      background-color: none !important;
+    }
+  }
+  :host-context(iam-inline-edit) {
+    display: block;
+    --display-btns: none;
+
+    label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
+    .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
       background-color: var(--colour-light);
+
+      input {
+        background-color: var(--colour-light);
+      }
+
+      .dropdown {
+        display: none;
+      }
     }
 
-    .dropdown {
-      display: none;
+    .wrapper {
+      margin-bottom: 0;
     }
-  }
 
-  .wrapper {
-    margin-bottom: 0;
+    .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
+      input {
+        border-color: transparent;
+        background: none;
+        margin-left: var(--input-ms,-1rem);
+        width: calc(100% + 1rem);
+        max-width: calc(100% + 1rem);
+        box-shadow: none;
+      }
+
+      .dropdown {
+        display: none;
+      }
+    }
+    .wrapper.filled:not(:focus-within):not([data-mousedown]) {
+      background: none;
+      border: none;
+      padding-left: 0;
+    }
   }
 
-  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
-    input {
-      border-color: transparent;
-      background: none;
-      margin-left: var(--input-ms,-1rem);
-      width: calc(100% + 1rem);
-      max-width: calc(100% + 1rem);
-      box-shadow: none;
+  :host([data-single]){
+
+    .wrapper.filled{
+      
+      slot[name='checked'] {
+        pointer-events: none;
+      }
     }
 
-    .dropdown {
+    #clear {
+      display: none;
+    }
+    ::slotted([slot='checked'])::after {
       display: none;
     }
   }
-  .wrapper.filled:not(:focus-within):not([data-mousedown]) {
-    background: none;
-    border: none;
-    padding-left: 0;
-  }
-}
-
-:host([data-single]){
+  :host-context(td){
 
-  .wrapper.filled{
-    
-    slot[name='checked'] {
-      pointer-events: none;
-    }
+      input,
+      textarea,
+      select {
+        margin-left: 0!important;
+        width: 100%!important;
+        max-width: 100%!important;
+      }
   }
 
-  #clear {
-    display: none;
+  ::slotted([slot='checked']) {
+    margin-bottom: 0.5rem;
+    order: var(--order, 1);
+    margin-inline: rem(3);
   }
+
   ::slotted([slot='checked'])::after {
-    display: none;
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
   }
-}
-:host-context(td){
-
-    input,
-    textarea,
-    select {
-      margin-left: 0!important;
-      width: 100%!important;
-      max-width: 100%!important;
-    }
 }