@iamproperty/components 7.3.0 → 7.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.component.min.js","sources":["../_global.js","../../modules/helpers.js","calendar.component.js"],"sourcesContent":["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","/**\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    document.addEventListener('submit', (event) => {\n        if (event && event.target instanceof HTMLElement && event.target.matches('form')) {\n            const form = event.target;\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                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};\n","import { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { uniqueID } from '../../modules/helpers.js';\ntrackComponentRegistered('iam-calendar');\nclass iamCalendar extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/calendar.component.css\";`;\n        const weekViewOnly = `<table class=\"table--day\" role=\"presentation\"><tbody>\n      <tr class=\"allday\"><th>All day</th></tr>\n      <tr><th data-hour=\"0\">00</th></tr>\n      <tr><th data-hour=\"1\">01</th></tr>\n      <tr><th data-hour=\"2\">02</th></tr>\n      <tr><th data-hour=\"3\">03</th></tr>\n      <tr><th data-hour=\"4\">04</th></tr>\n      <tr><th data-hour=\"5\">05</th></tr>\n      <tr><th data-hour=\"6\">06</th></tr>\n      <tr><th data-hour=\"7\">07</th></tr>\n      <tr><th data-hour=\"8\">08</th></tr>\n      <tr><th data-hour=\"9\">09</th></tr>\n      <tr><th data-hour=\"10\">10</th></tr>\n      <tr><th data-hour=\"11\">11</th></tr>\n      <tr><th data-hour=\"12\">12</th></tr>\n      <tr><th data-hour=\"13\">13</th></tr>\n      <tr><th data-hour=\"14\">14</th></tr>\n      <tr><th data-hour=\"15\">15</th></tr>\n      <tr><th data-hour=\"16\">16</th></tr>\n      <tr><th data-hour=\"17\">17</th></tr>\n      <tr><th data-hour=\"18\">18</th></tr>\n      <tr><th data-hour=\"19\">19</th></tr>\n      <tr><th data-hour=\"20\">20</th></tr>\n      <tr><th data-hour=\"21\">21</th></tr>\n      <tr><th data-hour=\"22\">22</th></tr>\n      <tr><th data-hour=\"23\">23</th></tr>\n      </tbody></table>`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"calendar__container\">\n\n      <div class=\"calendar__controls\">\n        <button id=\"today-button\" class=\"btn btn-action\">Today</button>\n\n\n        <button id=\"prev-button\" class=\"btn btn-action fa-chevron-left border-0\"><span class=\"visually-hidden\">previous</span></button>\n        <div class=\"calendar__datepicker\">\n          <span class=\"calendar__title\"></span>\n          <input type=\"date\" id=\"date\" name=\"date\" />\n        </div>\n        <button id=\"next-button\" class=\"btn btn-action fa-chevron-right border-0\"><span class=\"visually-hidden\">Next</span></button>\n      \n        <hr/>\n  \n\n        <select name=\"view\" id=\"view\" class=\"btn btn-action\">\n\n          <button>\n            <selectedcontent></selectedcontent> <i class=\"fa-regular fa-chevron-down\"></i>\n          </button>\n\n          <option value=\"month\"><i class=\"fa-light fa-calendar-days\"></i>Month</option>\n          <option value=\"week\"><i class=\"fa-light fa-calendar-week\"></i>Week</option>\n          <option value=\"day\"><i class=\"fa-light fa-calendar-day\"></i>Day</option>\n          <option value=\"list\"><i class=\"fa-light fa-list\"></i>List</option>\n          <option value=\"year\"><i class=\"fa-light fa-calendars\"></i>Year</option>\n        </select>\n\n        <label class=\"tag tag--toggle\"><input type=\"checkbox\" name=\"split\" value=\"true\">Split view</label>\n\n        <button id=\"filters-button\" class=\"btn btn-action\"><i class=\"fa-light fa-sliders\"></i><span class=\"visually-hidden\">Filters</span></button>\n\n        <button id=\"settings-button\" class=\"btn btn-action\"><i class=\"fa-light fa-gear\"></i><span class=\"visually-hidden\">Settings</span></button>\n        \n      </div>\n\n      <dialog id=\"settings\">\n        <button class=\"dialog__close\">Close</button>\n        <span class=\"h3\">Calendar settings</span>\n\n        <fieldset id=\"workday\" class=\"mb-5\">\n        <label>Start time <span><input type=\"time\" id=\"start-time\" name=\"start-time\" step=\"3600\" value=\"08:00\" /><span class=\"suffix fa-regular fa-clock\" aria-hidden=\"true\"></span></span></label>\n        <label>End time <span><input type=\"time\" id=\"end-time\" name=\"end-time\" step=\"3600\" value=\"18:00\" /><span class=\"suffix fa-regular fa-clock\" aria-hidden=\"true\"></span></span></label>\n\n        </fieldset>\n\n        <hr/>\n        <fieldset>\n          <span class=\"label\">Show weekends</span>\n          <input type=\"radio\" name=\"weekends\" id=\"weekends-yes\" tabindex=\"-1\">\n          <label for=\"weekends-yes\" class=\"d-inline-block\">Yes</label>\n          <input type=\"radio\" name=\"weekends\" id=\"weekends-no\" tabindex=\"-1\">\n          <label for=\"weekends-no\" class=\"d-inline-block\">No</label>\n        </fieldset>\n        <hr/>\n        <button class=\"btn btn-primary\">Save settings</button>\n        <button class=\"btn btn-secondary\">Cancel</button>\n\n      </dialog>\n\n    \n      <div class=\"calendar__wrapper\">\n        \n        <div id=\"week-view-corner\" class=\"calendar\">\n          <table>\n            <thead>\n            <tr>\n              <th class=\"column-header\">Empty</th>\n            </tr>\n            </thead>\n            <tbody>\n              <tr class=\"allday\">\n                <th>All day</th>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <div id=\"week-view-header\" class=\"calendar\">\n          <table>\n            <thead>\n            </thead>\n            <tbody>\n            </tbody>\n          </table>\n        </div>\n\n        <div id=\"week-view-side\">${weekViewOnly}</div>\n\n        <div class=\"calendar month-wrapper\" id=\"calendar\" part=\"calendar\">\n          <table>\n            <thead>\n            </thead>\n            <tbody>\n            </tbody>\n          </table>\n        </div>\n\n        <div id=\"year-view\">\n        </div>\n      </div>\n\n\n      <slot></slot>\n\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        this.monthArray = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n        this.dayArray = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n        this.english_ordinal_rules = new Intl.PluralRules(\"en\", { type: \"ordinal\" });\n        this.suffixes = {\n            one: \"st\",\n            two: \"nd\",\n            few: \"rd\",\n            other: \"th\"\n        };\n        this.calendars = ['Default']; // TO DO allow for these to be set via the component data attributes\n        this.eventTypes = []; // TO DO allow for these to be set via the component data attributes\n        this.pauseObserver = false;\n    }\n    createThead(sundayFirst) {\n        if (sundayFirst)\n            return `<tr>\n    <th class=\"column-header sunday\"><span class=\"long-day-name\">Sunday</span><span class=\"short-day-name\" role=\"presentation\">Sun</span></th>\n    <th class=\"column-header monday\"><span class=\"long-day-name\">Monday</span><span class=\"short-day-name\" role=\"presentation\">Mon</span></th>\n    <th class=\"column-header tuesday\"><span class=\"long-day-name\">Tuesday</span><span class=\"short-day-name\" role=\"presentation\">Tues</span></th>\n    <th class=\"column-header wednesday\"><span class=\"long-day-name\">Wednesday</span><span class=\"short-day-name\" role=\"presentation\">Wed</span></th>\n    <th class=\"column-header thursday\"><span class=\"long-day-name\">Thursday</span><span class=\"short-day-name\" role=\"presentation\">Thurs</span></th>\n    <th class=\"column-header friday\"><span class=\"long-day-name\">Friday</span><span class=\"short-day-name\" role=\"presentation\">Fri</span></th>\n    <th class=\"column-header saturday\"><span class=\"long-day-name\">Saturday</span><span class=\"short-day-name\" role=\"presentation\">Sat</span></th>\n  </tr>`;\n        return `<tr>\n    <th class=\"column-header monday\"><span class=\"long-day-name\">Monday</span><span class=\"short-day-name\" role=\"presentation\">Mon</span></th>\n    <th class=\"column-header tuesday\"><span class=\"long-day-name\">Tuesday</span><span class=\"short-day-name\" role=\"presentation\">Tues</span></th>\n    <th class=\"column-header wednesday\"><span class=\"long-day-name\">Wednesday</span><span class=\"short-day-name\" role=\"presentation\">Wed</span></th>\n    <th class=\"column-header thursday\"><span class=\"long-day-name\">Thursday</span><span class=\"short-day-name\" role=\"presentation\">Thurs</span></th>\n    <th class=\"column-header friday\"><span class=\"long-day-name\">Friday</span><span class=\"short-day-name\" role=\"presentation\">Fri</span></th>\n    <th class=\"column-header saturday\"><span class=\"long-day-name\">Saturday</span><span class=\"short-day-name\" role=\"presentation\">Sat</span></th>\n    <th class=\"column-header sunday\"><span class=\"long-day-name\">Sunday</span><span class=\"short-day-name\" role=\"presentation\">Sun</span></th>\n</tr>`;\n    }\n    numberDaysInMonth(year, month) {\n        return new Date(year, month, 0).getDate();\n    }\n    getOrdinalNumber(number) {\n        const category = this.english_ordinal_rules.select(number);\n        const suffix = this.suffixes[category];\n        return (number + suffix);\n    }\n    setToMonday(date) {\n        const day = date.getDay() || 7;\n        if (day !== 1)\n            date.setHours(-24 * (day - 1));\n        return date;\n    }\n    setToSunday(date) {\n        const monday = this.setToMonday(date);\n        const sunday = new Date(monday);\n        sunday.setDate(sunday.getDate() + 6);\n        return sunday;\n    }\n    getTitle(dateStr, view) {\n        const date = new Date(dateStr);\n        const month = date.getMonth();\n        const year = date.getFullYear();\n        const day = date.getDate();\n        const dayOfWeek = date.getDay() ? date.getDay() : 7;\n        if (view == \"week\") {\n            const monday = this.setToMonday(new Date(dateStr));\n            const sunday = this.setToSunday(new Date(dateStr));\n            const mondayMonth = monday.getMonth();\n            const mondayYear = monday.getFullYear();\n            const mondayDay = monday.getDate();\n            const sundayMonth = sunday.getMonth();\n            const sundayYear = sunday.getFullYear();\n            const sundayDay = sunday.getDate();\n            return `${this.getOrdinalNumber(mondayDay)} ${mondayMonth != sundayMonth ? this.monthArray[sundayMonth] : ''} ${mondayYear != sundayYear ? mondayYear : ''} - ${this.getOrdinalNumber(sundayDay)} ${this.monthArray[sundayMonth]} ${sundayYear}`;\n        }\n        else if (view == \"day\") {\n            return `${this.dayArray[dayOfWeek]} ${this.getOrdinalNumber(day)} ${this.monthArray[month]} ${year}`;\n        }\n        else if (view == \"year\") {\n            return `${year}`;\n        }\n        return `${this.monthArray[month]} ${year}`;\n    }\n    createCalendar(selectedDate, today, sundayFirst) {\n        const date = new Date(selectedDate);\n        const month = date.getMonth();\n        const year = date.getFullYear();\n        const day = date.getDate();\n        const selectedDateStr = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(day).padStart(2, \"0\")}`;\n        const daysThisMonth = this.numberDaysInMonth(year, month + 1);\n        const startOfMonth = new Date(`${year}-${String(month + 1).padStart(2, \"0\")}-01`);\n        const endOfMonth = new Date(`${year}-${String(month + 1).padStart(2, \"0\")}-${daysThisMonth}`);\n        const startDay = startOfMonth.getDay() != 0 ? startOfMonth.getDay() : 7;\n        const endDay = endOfMonth.getDay() != 0 ? endOfMonth.getDay() : 7;\n        const loopDays = daysThisMonth + startDay + (7 - endDay - 1);\n        // Get the previous month\n        const prevMonthDate = new Date(selectedDate);\n        prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);\n        const prevMonth = prevMonthDate.getMonth();\n        const prevMonthYear = prevMonthDate.getFullYear();\n        const daysPrevMonth = this.numberDaysInMonth(year, month);\n        // Get the next month\n        const nextMonthDate = new Date(selectedDate);\n        nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);\n        const nextMonth = nextMonthDate.getMonth();\n        const nextMonthYear = nextMonthDate.getFullYear();\n        // Get calendars\n        if (!this.hasAttribute('data-calendars')) {\n            Array.from(this.querySelectorAll('button[data-calendar]')).forEach((element) => {\n                // Scan through the buttons and look forunique calendar names\n                if (!(this.calendars.includes(element.getAttribute('data-calendar'))))\n                    this.calendars.push(element.getAttribute('data-calendar'));\n            });\n        }\n        // Create tbody string by looping through the number of days in month plus some days before and after\n        let tbodyContent = `<tr>`;\n        for (let i = (sundayFirst ? 0 : 1); i <= loopDays; i++) {\n            const loopDay = i - (startDay - 1);\n            const loopDate = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(loopDay).padStart(2, \"0\")}`;\n            const dayOfWeek = i % 7;\n            tbodyContent += `<td class=\"day--${this.dayArray[dayOfWeek].toLowerCase()} ${loopDate == today ? 'today' : ''} ${loopDate == selectedDateStr ? 'selected' : ''} ${i < startDay ? 'prev-month' : ''} ${loopDay > daysThisMonth ? 'next-month' : ''}\">`;\n            // prev month days\n            if (i < startDay) {\n                const adjustedLoopDay = daysPrevMonth - (startDay - 1 - i);\n                const adjustedLoopDate = `${prevMonthYear}-${String(prevMonth + 1).padStart(2, \"0\")}-${String(adjustedLoopDay).padStart(2, \"0\")}`;\n                tbodyContent += `<time class=\"column-header\" datetime=\"${adjustedLoopDate}\" title=\"${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[prevMonth]} ${year}\"><span class=\"day-of-week\">${this.dayArray[dayOfWeek]} </span><span class=\"day\">${adjustedLoopDay}</span> <span class=\"month\">${this.monthArray[prevMonth]}</span></time>`;\n                tbodyContent += this.addDay(adjustedLoopDate, this.calendars);\n            }\n            if (i >= startDay && loopDay <= daysThisMonth) {\n                tbodyContent += `<time class=\"column-header\" datetime=\"${loopDate}\" title=\"${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[month]} ${year}\"><span class=\"day-of-week\">${this.dayArray[dayOfWeek]} </span><span class=\"day\">${loopDay}</span> <span class=\"month\">${this.monthArray[month]}</span></time>`;\n                tbodyContent += this.addDay(loopDate, this.calendars);\n            }\n            // next month days\n            if (loopDay > daysThisMonth) {\n                const adjustedLoopDay = i - (startDay - 1) - daysThisMonth;\n                const adjustedLoopDate = `${nextMonthYear}-${String(nextMonth + 1).padStart(2, \"0\")}-${String(adjustedLoopDay).padStart(2, \"0\")}`;\n                tbodyContent += `<time class=\"column-header\" datetime=\"${adjustedLoopDate}\" title=\"${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[nextMonth]} ${year}\"><span class=\"day-of-week\">${this.dayArray[dayOfWeek]} </span><span class=\"day\">${adjustedLoopDay}</span> <span class=\"month\">${this.monthArray[nextMonth]}</span></time>`;\n                tbodyContent += this.addDay(adjustedLoopDate, this.calendars);\n            }\n            tbodyContent += '</td>';\n            // Close row and start a new one\n            if (((sundayFirst ? i + 1 : i) % 7) === 0 && i != loopDays) {\n                tbodyContent += `</tr><tr>`;\n            }\n        }\n        tbodyContent += '</tr>';\n        return tbodyContent;\n    }\n    addDay(day, calendars) {\n        let htmlTable = '<table class=\"table--day\">';\n        htmlTable += `<thead><tr><th>time</th>`;\n        calendars.forEach(calendarTitle => {\n            htmlTable += `<th class=\"column-header\">${calendarTitle}</th>`;\n        });\n        htmlTable += `</tr></thead>`;\n        htmlTable += `<tbody>`;\n        htmlTable += `<tr class=\"allday\"><th>All day</th>`;\n        calendars.forEach(calendarTitle => {\n            htmlTable += `<td datetime=\"${day}\" data-calendar=\"${calendarTitle}\"><span datetime=\"${day}\"></span></td>`;\n        });\n        htmlTable += `</tr>`;\n        for (let i = 0; i < 24; i++) {\n            htmlTable += `<tr class=\"hour${i}\"><th data-hour=\"${i}\">${i}${i < 12 ? 'am' : 'pm'}</th>`;\n            calendars.forEach(calendarTitle => {\n                htmlTable += `<td datetime=\"${day}T${String(i).padStart(2, \"0\")}:00\" data-calendar=\"${calendarTitle}\"><span datetime=\"${day}T${String(i).padStart(2, \"0\")}:00\"></span><span datetime=\"${day}T${String(i).padStart(2, \"0\")}:15\"></span><span datetime=\"${day}T${String(i).padStart(2, \"0\")}:30\"></span><span datetime=\"${day}T${String(i).padStart(2, \"0\")}:45\"></span></td>`;\n            });\n            htmlTable += `</tr>`;\n        }\n        htmlTable += `</tbody>`;\n        htmlTable += '</table>';\n        return htmlTable;\n    }\n    addEvents() {\n        function setDefaultEventValues(component, element, index) {\n            const datetime = element.getAttribute('datetime');\n            const datetimeArr = datetime.split('T');\n            let id = element.getAttribute('id');\n            // Add ID\n            if (!element.hasAttribute('id')) {\n                id = `event${uniqueID(index)}`;\n                element.setAttribute('id', id);\n            }\n            // Wrap content in span for formatting in week/day view\n            if (!element.querySelector('span:not(.tooltip__content')) {\n                element.innerHTML = `<span>${element.innerHTML}</span>`;\n            }\n            // Add event type enum so we can set the correct colours\n            //if(!element.hasAttribute('data-event-type-enum') && element.hasAttribute('data-event-type')){\n            const eventType = element.getAttribute('data-event-type');\n            if (!component.eventTypes.includes(eventType))\n                component.eventTypes.push(eventType);\n            element.setAttribute('data-event-type-enum', component.eventTypes.indexOf(eventType) + 1);\n            //}\n            // Add calendar enum so we can set the correct colours\n            if (element.hasAttribute('data-calendar')) {\n                const calendar = element.getAttribute('data-calendar');\n                if (!component.calendars.includes(calendar))\n                    component.calendars.push(calendar);\n                element.setAttribute('data-calendar-enum', component.calendars.indexOf(calendar) + 1);\n            }\n            if (!element.hasAttribute('data-calendar-enum')) {\n                element.setAttribute('data-calendar-enum', 1);\n            }\n            if (!element.hasAttribute('data-hours') && !element.hasAttribute('data-days')) {\n                if (datetimeArr[1]) {\n                    element.setAttribute('data-hours', 1);\n                }\n                else {\n                    element.setAttribute('data-days', 1);\n                }\n            }\n            let getRoundedDate = (minutes, d = new Date()) => {\n                let ms = 1000 * 60 * minutes; // convert minutes to ms\n                let roundedDate = new Date(Math.round(d.getTime() / ms) * ms);\n                const newMonth = roundedDate.getMonth();\n                const newYear = roundedDate.getFullYear();\n                const newDay = roundedDate.getDate();\n                const newMinutes = roundedDate.getMinutes();\n                const newHour = roundedDate.getHours();\n                const strRoundedDate = `${newYear}-${String(newMonth + 1).padStart(2, \"0\")}-${String(newDay).padStart(2, \"0\")}T${String(newHour).padStart(2, \"0\")}:${String(newMinutes).padStart(2, \"0\")}`;\n                return strRoundedDate;\n            };\n            if (datetimeArr[1]) {\n                element.setAttribute('data-start', datetimeArr[1]);\n                element.querySelector(':scope > span').setAttribute('data-start', datetimeArr[1]);\n                const roundedDatetime = getRoundedDate(15, new Date(datetime));\n                element.setAttribute('datetime', roundedDatetime);\n                console.log(roundedDatetime);\n            }\n            if (element.querySelector('.tooltip__content')) {\n                const tooltip = element.querySelector('.tooltip__content');\n                tooltip.style.positionAnchor = `--${id}`;\n                element.style.anchorName = `--${id}`;\n            }\n            element.classList.add('defaults-added');\n        }\n        function adjustEvent(component, element, continued) {\n            var _a;\n            const datetime = element.getAttribute('datetime');\n            const date = new Date(datetime);\n            const dayOfWeek = date.getDay() ? date.getDay() : 7;\n            // Locate where we need to add slots for the buttons to go - We need duplicate slots for the split view and fixed header\n            const timeTd = component.shadowRoot.querySelector(`.month-wrapper .table--day td:has(span[datetime=\"${datetime}\"])${element.hasAttribute('data-calendar') ? `[data-calendar=\"${element.getAttribute('data-calendar').replace('_', '')}\"]` : ''}`);\n            const timeTdHeader = component.shadowRoot.querySelector(`#week-view-header .table--day td:has(span[datetime=\"${datetime}\"])${element.hasAttribute('data-calendar') ? `[data-calendar=\"${element.getAttribute('data-calendar').replace('_', '')}\"]` : ''}`);\n            if (timeTdHeader && timeTdHeader.closest('tr').classList.contains(\"allday\")) {\n                // Add the alldays slot for the fixed header \n                if (!timeTdHeader.querySelector(`slot[name=\"${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header]\"`)) {\n                    timeTdHeader.querySelector(`span[datetime=\"${datetime}\"]`).insertAdjacentHTML('beforeEnd', `<slot name=\"${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header\" class=\"${continued ? 'continued' : ''}\"></slot>`);\n                }\n            }\n            const dateTd = (_a = timeTd === null || timeTd === void 0 ? void 0 : timeTd.parentElement) === null || _a === void 0 ? void 0 : _a.closest('td');\n            // original event needs a slot name adding\n            element.setAttribute('slot', `${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}`);\n            // Add matching slot to the event element to have it show in the correct place on the calendar\n            if (timeTd) {\n                // Add the default slot\n                if (!timeTd.querySelector(`slot[name=\"${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}\"]`)) {\n                    timeTd.querySelector(`span[datetime=\"${datetime}\"]`).insertAdjacentHTML('beforeEnd', `<slot name=\"${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}\" class=\"${continued ? 'continued' : ''}\"></slot>`);\n                }\n                // Set the classes need to create the grey bars in the mobile month view\n                const events = dateTd.hasAttribute('data-events') ? parseInt(dateTd.getAttribute('data-events')) : 0;\n                let hours = dateTd.hasAttribute('data-hours') ? parseFloat(dateTd.getAttribute('data-hours')) : 0;\n                hours += element.hasAttribute('data-hours') ? parseFloat(element.getAttribute('data-hours')) : 0;\n                dateTd.setAttribute('data-events', parseInt(events) + 1);\n                if ((events + 1) > 2)\n                    dateTd.setAttribute('data-more', (parseInt(events) + 1) - 2);\n                dateTd.setAttribute('data-hours', hours);\n                dateTd.classList.add('has-event');\n                if (timeTd.closest('tr').classList.contains('has-event'))\n                    timeTd.closest('tr').classList.add('multiple-event');\n                else\n                    timeTd.closest('tr').classList.add('has-event');\n                if (hours > 2)\n                    dateTd.classList.add('multi-events');\n                if (hours > 4)\n                    dateTd.classList.add('busy-day');\n                if (element.hasAttribute('data-days'))\n                    dateTd.classList.add('all-day');\n                if (element.classList.contains('continued'))\n                    dateTd.classList.add('continued-day');\n            }\n            // Add CSS properties so we can control the size of the event elements for day and week view\n            if (element.hasAttribute('data-hours'))\n                element.style.setProperty('--event-height', `${parseInt(element.getAttribute('data-hours')) * (1.09375 * 4)}rem`);\n            if (element.hasAttribute('data-days') && !element.classList.contains('processed')) {\n                const eventDayTotal = element.getAttribute('data-days');\n                element.style.setProperty('--event-width', `${eventDayTotal * 100}%`);\n                element.style.setProperty('--event-max-width', `${(8 - dayOfWeek) * 100}%`);\n                element.classList.add('allday-event');\n                // Create a duplicate event for each day the orginal \n                for (let i = 1; i < eventDayTotal; i++) {\n                    const cloneElement = element.cloneNode(true);\n                    cloneElement.removeAttribute('data-days');\n                    cloneElement.removeAttribute('style');\n                    cloneElement.classList.add('continued');\n                    cloneElement.classList.add('allday-event');\n                    const id = `event${uniqueID(i)}`;\n                    cloneElement.setAttribute('id', id);\n                    if (cloneElement.querySelector('.tooltip__content')) {\n                        const tooltip = cloneElement.querySelector('.tooltip__content');\n                        tooltip.style.positionAnchor = `--${id}`;\n                        cloneElement.style.anchorName = `--${id}`;\n                    }\n                    const newDate = new Date(datetime);\n                    newDate.setDate(newDate.getDate() + i);\n                    const newMonth = newDate.getMonth();\n                    const newYear = newDate.getFullYear();\n                    const newDay = newDate.getDate();\n                    const newDayOfWeek = newDate.getDay() ? newDate.getDay() : 7;\n                    const strCloneEvent = `${newYear}-${String(newMonth + 1).padStart(2, \"0\")}-${String(newDay).padStart(2, \"0\")}`;\n                    cloneElement.setAttribute('data-original-datetime', element.getAttribute('datetime'));\n                    cloneElement.setAttribute('datetime', strCloneEvent);\n                    element.after(cloneElement); // Add after original\n                    adjustEvent(component, cloneElement, true);\n                    if (newDayOfWeek == 1) { // Monday\n                        cloneElement.style.setProperty('--event-width', `${(eventDayTotal - i) * 100}%`);\n                        cloneElement.style.setProperty('--event-max-width', `${(8 - newDayOfWeek) * 100}%`);\n                        cloneElement.classList.remove('continued');\n                    }\n                }\n            }\n            // Add flag so we dont have to re-do the above\n            element.classList.add('processed');\n        }\n        this.pauseObserver = true;\n        Array.from(this.querySelectorAll('button[datetime]')).forEach((element, index) => {\n            setDefaultEventValues(this, element, index);\n            adjustEvent(this, element);\n        });\n        setTimeout(() => {\n            this.pauseObserver = false;\n        }, \"500\");\n    }\n    addJSEvents(component) {\n        var _a, _b, _c, _d, _e, _f, _g;\n        // Add events to the newly created calendar \n        const title = (_a = component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.calendar__title');\n        const datePicker = (_b = component.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#date`);\n        const viewPicker = (_c = component.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#view`);\n        const yearView = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#year-view');\n        const today = new Date();\n        const date = today.getDate();\n        const month = today.getMonth();\n        const year = today.getFullYear();\n        const strToday = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(date).padStart(2, \"0\")}`;\n        const tbody = (_e = component.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#calendar > table > tbody');\n        // clicking on the day istelf\n        Array.from(component.shadowRoot.querySelectorAll('.month-wrapper > table > tbody > tr > td:has(slot)')).forEach((element) => {\n            element.addEventListener('click', (event) => {\n                if (!event.target.matches('button')) {\n                    const elementDate = element.querySelector('time').getAttribute('datetime');\n                    datePicker.value = elementDate;\n                    Array.from(tbody.querySelectorAll(':scope > tr > td')).forEach((innerelement) => {\n                        innerelement.classList.remove('selected');\n                    });\n                    element.classList.add('selected');\n                    // Go to day if the in month view with out split view enabled\n                    if (component.shadowRoot.querySelector('[name=\"split\"]:checked') && viewPicker.value == \"month\") {\n                        Array.from(component.querySelectorAll(`[data-slot]`)).forEach((button) => {\n                            button.setAttribute('slot', button.getAttribute('data-slot'));\n                        });\n                        Array.from(component.querySelectorAll(`[slot^=\"${datePicker.value}\"]`)).forEach((button) => {\n                            button.setAttribute('data-slot', button.getAttribute('slot'));\n                            button.removeAttribute('slot');\n                        });\n                    }\n                    else if (!component.shadowRoot.querySelector('[name=\"split\"]:checked') && viewPicker.value == \"month\") {\n                        viewPicker.value = \"day\";\n                        title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n                        component.scrollIntoPlace();\n                    }\n                    if (viewPicker.value == \"year\") {\n                        viewPicker.value = \"month\";\n                        yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = '';\n                        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = component.createCalendar(datePicker.value, strToday);\n                        component.addEvents();\n                    }\n                }\n            });\n        });\n        // Drag and drop\n        (_f = component.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`#calendar .table--day td span`).forEach((element) => {\n            element.addEventListener(\"dragover\", (ev) => {\n                ev.preventDefault();\n                return false;\n            });\n            element.addEventListener(\"dragenter\", (ev) => {\n                ev.preventDefault();\n                element.classList.add('dragover');\n            });\n            element.addEventListener(\"dragleave\", (ev) => {\n                ev.preventDefault();\n                element.classList.remove('dragover');\n            });\n            element.addEventListener(\"drop\", (ev) => {\n                ev.preventDefault();\n                const droppedElement = component.querySelector(`#${ev.dataTransfer.getData(\"text\")}`);\n                const td = element.closest('td');\n                const datetime = element.getAttribute('datetime');\n                element.classList.remove('dragover');\n                // Add a new slot to te span if needed\n                if (!element.querySelector(`slot[name=\"${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}]` : ''}]\"`)) {\n                    element.insertAdjacentHTML('beforeEnd', `<slot name=\"${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}\" class=\"\"></slot>`);\n                }\n                // Update the slot attribute to match the slot the event has been dropped on\n                droppedElement === null || droppedElement === void 0 ? void 0 : droppedElement.setAttribute('slot', `${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}`);\n            });\n        });\n        // Watch for the event being resized \n        const resizeObserver = new ResizeObserver((entries) => {\n            for (const entry of entries) {\n                if (entry.target.classList.contains('mousedown'))\n                    entry.target.classList.add('resizing');\n            }\n        });\n        if (component.hasAttribute('data-drag')) {\n            component.querySelectorAll(`button:not([draggable])`).forEach((element) => {\n                element.setAttribute('draggable', 'true');\n                element.addEventListener(\"dragstart\", (ev) => {\n                    ev.dataTransfer.setData(\"text\", ev.target.id); // save the id for when dropped\n                });\n                // set onbserver\n                resizeObserver.observe(element);\n                element.addEventListener(\"mousedown\", (ev) => {\n                    element.classList.add('mousedown');\n                });\n                element.addEventListener(\"click\", (ev) => {\n                    if (element.classList.contains('resizing')) {\n                        ev.stopPropagation();\n                        ev.stopImmediatePropagation();\n                        element.classList.remove('mousedown');\n                        element.classList.remove('resizing');\n                        // Work out the evnt length in hours and set the height\n                        const span = this.shadowRoot.querySelector(`span[datetime=\"${element.getAttribute('datetime')}\"]`);\n                        const spanStyles = window.getComputedStyle(span);\n                        const hours = Math.round(parseInt(element.style.height) / parseInt(spanStyles.getPropertyValue(\"height\"))) / 4;\n                        element.setAttribute('data-hours', hours);\n                        element.style.setProperty('--event-height', `${hours * (1.09375 * 4)}rem`);\n                        element.style.height = \"\";\n                        // to do dispatch event\n                    }\n                });\n            });\n        }\n        component.querySelectorAll(`button`).forEach((element) => {\n            element.addEventListener(\"contextmenu\", (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n            });\n        });\n        (_g = component.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelectorAll(`.month-wrapper > table > tbody > tr > td`).forEach((element) => {\n            element.addEventListener(\"contextmenu\", (event) => {\n                event.preventDefault();\n                const customEvent = new CustomEvent('right-click', {\n                    detail: {\n                        'clientX': event.clientX,\n                        'clientY': event.clientY,\n                        'element': element,\n                        'datetime': element.querySelector('time').getAttribute('datetime')\n                    },\n                });\n                console.log(element);\n                this.dispatchEvent(customEvent);\n            });\n        });\n    }\n    paginateDate(direction, view, currentDate) {\n        if (view == \"month\" || view == \"list\") {\n            const selectedDate = new Date(currentDate);\n            if (direction == \"next\")\n                selectedDate.setMonth(selectedDate.getMonth() + 1);\n            else\n                selectedDate.setMonth(selectedDate.getMonth() - 1);\n            const month = selectedDate.getMonth() + 1;\n            const year = selectedDate.getFullYear();\n            const strNextMonth = `${year}-${String(month).padStart(2, \"0\")}-01`;\n            return strNextMonth;\n        }\n        else if (view == \"week\") {\n            //const selectedDate = new Date(currentDate);\n            const monday = this.setToMonday(new Date(currentDate));\n            if (direction == \"next\")\n                monday.setDate(monday.getDate() + 7);\n            else\n                monday.setDate(monday.getDate() - 7);\n            const date = monday.getDate();\n            const month = monday.getMonth() + 1;\n            const year = monday.getFullYear();\n            const strNextWeek = `${year}-${String(month).padStart(2, \"0\")}-${String(date).padStart(2, \"0\")}`;\n            return strNextWeek;\n        }\n        else if (view == \"year\") {\n            const selectedDate = new Date(currentDate);\n            if (direction == \"next\")\n                selectedDate.setYear(selectedDate.getFullYear() + 1);\n            else\n                selectedDate.setYear(selectedDate.getFullYear() - 1);\n            const year = selectedDate.getFullYear();\n            const month = selectedDate.getMonth() + 1;\n            const strNextMonth = `${year}-${String(month).padStart(2, \"0\")}-01`;\n            return strNextMonth;\n        }\n        const nextDay = new Date(currentDate);\n        if (direction == \"next\")\n            nextDay.setDate(nextDay.getDate() + 1);\n        else\n            nextDay.setDate(nextDay.getDate() - 1);\n        const date = nextDay.getDate();\n        const month = nextDay.getMonth() + 1;\n        const year = nextDay.getFullYear();\n        const strNextDay = `${year}-${String(month).padStart(2, \"0\")}-${String(date).padStart(2, \"0\")}`;\n        return strNextDay;\n    }\n    setWeekDay() {\n        var _a, _b, _c, _d;\n        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.out-of-hours').forEach(element => {\n            element.classList.remove('out-of-hours');\n        });\n        const startTime = parseInt((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#start-time').value.split(':')[0]);\n        const endTime = parseInt((_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#end-time').value.split(':')[0]);\n        (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('[data-hour]').forEach(element => {\n            const hour = parseInt(element.getAttribute('data-hour'));\n            if (hour < startTime)\n                element.classList.add('out-of-hours');\n            if (hour >= endTime)\n                element.classList.add('out-of-hours');\n        });\n    }\n    scrollIntoPlace() {\n        var _a, _b;\n        const fs = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'));\n        const startTime = parseInt((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#start-time').value.split(':')[0]);\n        const scrollPos = startTime * (4.5 * fs);\n        const viewPicker = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#view`);\n        const wrapper = this.shadowRoot.querySelector('.calendar__wrapper');\n        // scroll\n        if (viewPicker.value == \"week\")\n            wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by\n        else if (viewPicker.value == \"day\") {\n            wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by\n        }\n    }\n    setupSettings() {\n        var _a, _b;\n        const settingsButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#settings-button');\n        const settingsDialog = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#settings');\n        // Setup the pre-defined attributes and display the form elements to match\n        if (this.hasAttribute('data-hide-weekends'))\n            settingsDialog.querySelector('#weekends-no').checked = true;\n        else\n            settingsDialog.querySelector('#weekends-yes').checked = true;\n        if (this.hasAttribute('data-start-time'))\n            settingsDialog.querySelector('#start-time').value = this.getAttribute('data-start-time');\n        else\n            this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);\n        if (this.hasAttribute('data-end-time'))\n            settingsDialog.querySelector('#end-time').value = this.getAttribute('data-end-time');\n        else\n            this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);\n        // open dialog\n        settingsButton === null || settingsButton === void 0 ? void 0 : settingsButton.addEventListener('click', () => {\n            settingsDialog.showModal();\n            settingsDialog.focus();\n            const customEvent = new CustomEvent('open-settings');\n            this.dispatchEvent(customEvent);\n        });\n        // On clicking the save button, adjust the data attributes\n        settingsDialog === null || settingsDialog === void 0 ? void 0 : settingsDialog.addEventListener('click', (event) => {\n            if (event && event.target.matches('button')) {\n                if (event.target.matches('.btn-primary')) {\n                    if (settingsDialog.querySelector('#weekends-no:checked'))\n                        this.setAttribute('data-hide-weekends', 'true');\n                    else\n                        this.removeAttribute('data-hide-weekends');\n                    this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);\n                    this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);\n                    this.setWeekDay();\n                    const customEvent = new CustomEvent('save-settings');\n                    this.dispatchEvent(customEvent);\n                }\n                const customEvent = new CustomEvent('close-settings');\n                this.dispatchEvent(customEvent);\n                settingsDialog.close();\n            }\n        });\n    }\n    setTime() {\n        var _a;\n        if (!this.hasAttribute('data-time')) {\n            const today = new Date();\n            const hour = today.getHours();\n            const minute = today.getMinutes();\n            const time = `${hour}:${minute}`;\n            this.setAttribute('data-time', time);\n        }\n        if (this.hasAttribute('data-time')) {\n            const time = this.getAttribute('data-time');\n            const hour = parseInt(time.split(':')[0]);\n            const minute = parseInt(time.split(':')[1]);\n            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-hour=\"${hour}\"]`).forEach((element) => {\n                var _a;\n                element.setAttribute('data-time', time);\n                element.classList.add('column-header');\n                (_a = element.closest('tr')) === null || _a === void 0 ? void 0 : _a.style.setProperty('--minute-pos', ((minute / 60) * 100) + '%');\n            });\n        }\n    }\n    getYearView(selectedDate, today, sundayFirst) {\n        let yearViewStr = \"\";\n        for (let i = 0; i < 12; i++) {\n            console.log(selectedDate);\n            const selectedDateObj = new Date(selectedDate);\n            const selectedYear = selectedDateObj.getFullYear();\n            const selectedFormattedDate = `${selectedYear}-${String(i + 1).padStart(2, \"0\")}-01`;\n            yearViewStr += `<div class='month-wrapper'>\n        <time class=\"column-header\">${this.monthArray[i]}</time>\n        <table>\n          <thead>\n            ${this.createThead(sundayFirst)}\n          </thead>\n          <tbody>\n            ${this.createCalendar(selectedFormattedDate, today, sundayFirst)}\n          </tbody>\n        </table>\n      </div>`;\n        }\n        return yearViewStr;\n    }\n    connectedCallback() {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n        // To to transform the below into variables of component to make more re-usable\n        const title = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.calendar__title');\n        const tbody = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#calendar > table > tbody');\n        const thead = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#calendar > table > thead');\n        //const tbodySplit = this.shadowRoot?.querySelector('#split > table > tbody');\n        //const theadSplit = this.shadowRoot?.querySelector('#split > table > thead');\n        const weekViewHeader = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#week-view-header > table > tbody');\n        const yearView = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#year-view');\n        const datePicker = (_f = this.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(`#date`);\n        const viewPicker = (_g = this.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector(`#view`);\n        const todayButton = (_h = this.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('#today-button');\n        const filtersButton = (_j = this.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('#filters-button');\n        const prevButton = (_k = this.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('#prev-button');\n        const nextButton = (_l = this.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('#next-button');\n        const sundayFirst = this.hasAttribute('data-sunday-first');\n        const splitButton = (_m = this.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector(`[name=\"split\"]`);\n        // set the table head - starting by monday by default but can be changed to sunday\n        thead === null || thead === void 0 ? void 0 : thead.innerHTML = this.createThead(sundayFirst);\n        //theadSplit?.innerHTML = this.createThead(sundayFirst);\n        // Get a formatted version of todays date\n        const today = new Date();\n        const date = today.getDate();\n        const month = today.getMonth();\n        const year = today.getFullYear();\n        const strToday = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(date).padStart(2, \"0\")}`;\n        datePicker.value = strToday;\n        // Setup the view, month being default\n        if (this.hasAttribute('data-view'))\n            viewPicker.value = this.getAttribute('data-view');\n        else {\n            this.setAttribute('data-view', \"month\");\n            viewPicker.value = \"month\";\n        }\n        if (this.hasAttribute('data-views'))\n            viewPicker === null || viewPicker === void 0 ? void 0 : viewPicker.setAttribute('data-views', this.getAttribute('data-views'));\n        // Create the calendars\n        if (this.hasAttribute('data-calendars')) {\n            this.calendars = this.getAttribute('data-calendars').split(',');\n            this.calendars.forEach((item, index) => {\n                this.calendars[index] = item.trim();\n            });\n        }\n        // Setup the settings dialog\n        this.setupSettings();\n        // Setup the calendar then adjust and add events \n        title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(strToday, viewPicker.value);\n        const calendarHtml = this.createCalendar(strToday, strToday, sundayFirst);\n        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;\n        //tbodySplit?.innerHTML = calendarHtml;\n        weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;\n        if (viewPicker.value == \"year\") {\n            yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);\n            tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';\n        }\n        this.addEvents();\n        this.addJSEvents(this);\n        this.setWeekDay(); // Working hours\n        this.setTime(); // Month and day view has a current time indicator\n        this.scrollIntoPlace(); // Scroll into place - month and day view needs have the weekday hours in place\n        // #region Add events for the basic top controls\n        // Remove the slot attribute on selected days when in split mode\n        splitButton === null || splitButton === void 0 ? void 0 : splitButton.addEventListener('change', () => {\n            if (splitButton.checked) {\n                Array.from(this.querySelectorAll(`[slot^=\"${datePicker.value}\"]`)).forEach((button) => {\n                    button.setAttribute('data-slot', button.getAttribute('slot'));\n                    button.removeAttribute('slot');\n                });\n            }\n            else {\n                Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {\n                    button.setAttribute('slot', button.getAttribute('data-slot'));\n                });\n            }\n        });\n        const resizeObserver = new ResizeObserver((entries) => {\n            const splitButtonDisplayed = window.getComputedStyle(splitButton === null || splitButton === void 0 ? void 0 : splitButton.parentElement, null).display;\n            if (splitButtonDisplayed == \"none\") {\n                Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {\n                    button.setAttribute('slot', button.getAttribute('data-slot'));\n                });\n                splitButton.checked = false;\n            }\n        });\n        resizeObserver.observe(this);\n        viewPicker === null || viewPicker === void 0 ? void 0 : viewPicker.addEventListener('change', () => {\n            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n            this.setAttribute('data-view', viewPicker.value);\n            if (viewPicker.value == \"week\") {\n                Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {\n                    button.setAttribute('slot', button.getAttribute('slot') + '-header');\n                });\n            }\n            else {\n                Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {\n                    var _a;\n                    button.setAttribute('slot', (_a = button.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.replace('-header', ''));\n                });\n            }\n            if (viewPicker.value == \"week\" || viewPicker.value == \"day\")\n                this.scrollIntoPlace();\n            if (viewPicker.value != \"month\") {\n                Array.from(this.querySelectorAll(`[data-slot^=\"${datePicker.value}\"]`)).forEach((button) => {\n                    button.setAttribute('slot', button.getAttribute('data-slot'));\n                });\n            }\n            if (viewPicker.value == \"year\") {\n                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);\n                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';\n                this.addEvents();\n                this.addJSEvents(this);\n                this.setWeekDay(); // Working hours\n                this.setTime(); // Month and day view has a current time indicator\n                this.scrollIntoPlace();\n            }\n            else if ((tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML) == \"\") {\n                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = '';\n                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = this.createCalendar(datePicker.value, strToday);\n                this.addEvents();\n                this.addJSEvents(this);\n                this.setWeekDay(); // Working hours\n                this.setTime(); // Month and day view has a current time indicator\n                this.scrollIntoPlace();\n            }\n            const customEvent = new CustomEvent('change-view', {\n                detail: {\n                    'view': viewPicker.value,\n                    'date': datePicker.value\n                },\n            });\n            this.dispatchEvent(customEvent);\n        });\n        function resetCalendar(component) {\n            if (viewPicker.value == \"year\") {\n                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = component.getYearView(datePicker.value, strToday, sundayFirst);\n                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';\n                component.addEvents();\n                component.addJSEvents(component);\n                component.setWeekDay(); // Working hours\n                component.setTime(); // Month and day view has a current time indicator\n            }\n            else {\n                const calendarHtml = component.createCalendar(datePicker.value, strToday);\n                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;\n                //tbodySplit?.innerHTML = calendarHtml;\n                weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;\n                component.addEvents();\n                component.addJSEvents(component);\n                component.setWeekDay();\n                component.setTime();\n            }\n        }\n        function updateCalendar(component) {\n            Array.from(component.shadowRoot.querySelectorAll('.selected')).forEach((element) => {\n                element.classList.remove('selected');\n            });\n            Array.from(component.shadowRoot.querySelectorAll(`td:has(time[datetime=\"${datePicker.value}\"]):not(.prev-month, .next-month)`)).forEach((element) => {\n                element.classList.add('selected');\n            });\n        }\n        datePicker === null || datePicker === void 0 ? void 0 : datePicker.addEventListener('change', () => {\n            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n            if (this.shadowRoot.querySelector(`td:has(time[datetime=\"${datePicker.value}\"]):not(.prev-month, .next-month)`))\n                updateCalendar(this);\n            else\n                resetCalendar(this);\n            const customEvent = new CustomEvent('change-date', {\n                detail: {\n                    'view': viewPicker.value,\n                    'date': datePicker.value\n                },\n            });\n            this.dispatchEvent(customEvent);\n        });\n        filtersButton === null || filtersButton === void 0 ? void 0 : filtersButton.addEventListener('click', () => {\n            const customEvent = new CustomEvent('open-filters');\n            this.dispatchEvent(customEvent);\n        });\n        // HTML Observer\n        const htmlUpdated = (mutationList, observer) => {\n            observer.disconnect();\n            console.log(this.pauseObserver);\n            if (this.pauseObserver == false) {\n                for (const mutation of mutationList) {\n                    if (mutation.type == 'characterData' || (mutation.type == 'childList' && mutation.addedNodes.length) || mutation.type === 'attributes') {\n                        //resetCalendar(this);\n                        this.addEvents();\n                    }\n                }\n            }\n            observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });\n        };\n        const observer = new MutationObserver(htmlUpdated);\n        observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });\n        todayButton === null || todayButton === void 0 ? void 0 : todayButton.addEventListener('click', () => {\n            datePicker.value = strToday;\n            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n            if (this.shadowRoot.querySelector(`td:has(time[datetime=\"${datePicker.value}\"]):not(.prev-month, .next-month)`))\n                updateCalendar(this);\n            else\n                resetCalendar(this);\n            const customEvent = new CustomEvent('change-date-today', {\n                detail: {\n                    'view': viewPicker.value,\n                    'date': datePicker.value\n                },\n            });\n            this.dispatchEvent(customEvent);\n        });\n        prevButton === null || prevButton === void 0 ? void 0 : prevButton.addEventListener('click', () => {\n            datePicker.value = this.paginateDate(\"prev\", viewPicker.value, datePicker.value);\n            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n            if (this.shadowRoot.querySelector(`td:has(time[datetime=\"${datePicker.value}\"]):not(.prev-month, .next-month)`))\n                updateCalendar(this);\n            else\n                resetCalendar(this);\n            const customEvent = new CustomEvent('change-date-previous', {\n                detail: {\n                    'view': viewPicker.value,\n                    'date': datePicker.value\n                },\n            });\n            this.dispatchEvent(customEvent);\n        });\n        nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', () => {\n            datePicker.value = this.paginateDate(\"next\", viewPicker.value, datePicker.value);\n            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);\n            console.log(datePicker.value);\n            if (this.shadowRoot.querySelector(`td:has(time[datetime=\"${datePicker.value}\"]):not(.prev-month, .next-month)`))\n                updateCalendar(this);\n            else\n                resetCalendar(this);\n            const customEvent = new CustomEvent('change-date-next', {\n                detail: {\n                    'view': viewPicker.value,\n                    'date': datePicker.value\n                },\n            });\n            this.dispatchEvent(customEvent);\n        });\n        // #endregion\n        // TODO\n        trackComponent(this, 'iam-calendar', [\n            'open-filters',\n            'change-view',\n            'change-date',\n            'change-date-today',\n            'change-date-previous',\n            'change-date-next',\n            'open-settings',\n            'close-settings',\n            'save-settings'\n        ]);\n    }\n    static get observedAttributes() {\n        return ['data-calendars', 'data-view'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        var _a, _b, _c, _d;\n        this.pauseObserver = true;\n        switch (attrName) {\n            case 'data-calendars':\n                {\n                    if (oldVal != newVal) {\n                        const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#calendar > table > tbody');\n                        const weekViewHeader = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#week-view-header > table > tbody');\n                        const datePicker = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#date`);\n                        // Get a formatted version of todays date\n                        const today = new Date();\n                        const date = today.getDate();\n                        const month = today.getMonth();\n                        const year = today.getFullYear();\n                        const strToday = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(date).padStart(2, \"0\")}`;\n                        if (this.hasAttribute('data-calendars')) {\n                            this.calendars = this.getAttribute('data-calendars').split(',');\n                            this.calendars.forEach((item, index) => {\n                                this.calendars[index] = item.trim();\n                            });\n                        }\n                        const calendarHtml = this.createCalendar(datePicker.value, strToday);\n                        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;\n                        weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;\n                        this.addEvents();\n                        this.addJSEvents(this);\n                        this.setWeekDay();\n                        this.setTime();\n                    }\n                    break;\n                }\n                ;\n            case 'data-view': {\n                if (oldVal != newVal) {\n                    const viewPicker = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(`#view`);\n                    viewPicker.value = newVal;\n                    viewPicker.dispatchEvent(new Event('change'));\n                }\n                break;\n            }\n        }\n        setTimeout(() => {\n            this.pauseObserver = false;\n        }, \"500\");\n    }\n}\nexport default iamCalendar;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","uniqueID","index","iamCalendar","weekViewOnly","template","sundayFirst","year","month","number","category","suffix","date","day","monday","sunday","dateStr","view","dayOfWeek","mondayMonth","mondayYear","mondayDay","sundayMonth","sundayYear","sundayDay","selectedDate","today","selectedDateStr","daysThisMonth","startOfMonth","endOfMonth","startDay","endDay","loopDays","prevMonthDate","prevMonth","prevMonthYear","daysPrevMonth","nextMonthDate","nextMonth","nextMonthYear","element","tbodyContent","i","loopDay","loopDate","adjustedLoopDay","adjustedLoopDate","calendars","htmlTable","calendarTitle","setDefaultEventValues","datetime","datetimeArr","id","eventType","calendar","getRoundedDate","minutes","d","ms","roundedDate","newMonth","newYear","newDay","newMinutes","newHour","roundedDatetime","tooltip","adjustEvent","continued","_a","timeTd","timeTdHeader","dateTd","events","hours","eventDayTotal","cloneElement","newDate","newDayOfWeek","strCloneEvent","_b","_c","_d","_e","_f","_g","title","datePicker","viewPicker","yearView","strToday","tbody","elementDate","innerelement","button","ev","droppedElement","td","resizeObserver","entries","entry","span","spanStyles","customEvent","direction","currentDate","nextDay","startTime","endTime","hour","fs","scrollPos","wrapper","settingsButton","settingsDialog","minute","time","yearViewStr","selectedFormattedDate","_h","_j","_k","_l","_m","thead","weekViewHeader","todayButton","filtersButton","prevButton","nextButton","splitButton","item","calendarHtml","resetCalendar","updateCalendar","htmlUpdated","mutationList","observer","mutation","attrName","oldVal","newVal"],"mappings":"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"}

package/assets/js/components/card/card.component.js

@@ -36,6 +36,18 @@ class iamCard extends HTMLElement {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const cardComponent = this;
             const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+            const assetLocation = document.body.hasAttribute('data-assets-location')
+                ? document.body.getAttribute('data-assets-location')
+                : '/assets';
+            if (!window.customElements.get(`iam-menu`)) {
+                import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+                    .then((module) => {
+                    window.customElements.define(`iam-menu`, module.default);
+                })
+                    .catch((err) => {
+                    console.log(err.message);
+                });
+            }
             setupCard(cardComponent);
             // Add Illustration HTML
             if (cardComponent.hasAttribute('data-illustration')) {
@@ -48,11 +60,11 @@ class iamCard extends HTMLElement {
             // Secondary buttons and actions
             // Add the dialog wrapper HTML
             if (cardComponent.querySelector('[slot="btns"]')) {
-                cardComponent.shadowRoot.innerHTML += `<div class="dialog__wrapper">
-      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
-      <div class="dialog--fix dialog--list" id="actions" popover>
+                cardComponent.shadowRoot.innerHTML += `<div class="menu__wrapper">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
+      <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
         <slot name="btns"></slot>
-      </div>
+      </iam-menu>
     </div>`;
                 // safari and firefox anchor fix for cards
                 if (!CSS.supports('top', 'anchor(top)')) {
@@ -66,9 +78,9 @@ class iamCard extends HTMLElement {
                         const left = viewportOffset.left;
                         actionPopover.style.setProperty('display', 'block');
                         actionPopover.style.setProperty('top', top + 'px');
-                        actionPopover.style.setProperty('left', (left - 100) + 'px');
+                        actionPopover.style.setProperty('left', left - 100 + 'px');
                     });
-                    document.addEventListener("scroll", (event) => {
+                    document.addEventListener('scroll', (event) => {
                         actionPopover.style.setProperty('display', 'none');
                     });
                 }
@@ -88,8 +100,8 @@ class iamCard extends HTMLElement {
                     cardComponent.classList.remove('prevent-hover');
                 });
             }
-            if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {
-                const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
+            if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {
+                const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');
                 element.addEventListener('mouseenter', () => {
                     cardComponent.classList.add('prevent-hover');
                 });

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

@@ -1,7 +1,7 @@
 /*!
-  * iamKey v7.3.0
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
-  */const g=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},h=(e,a,i)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:a}),i.forEach(t=>{e.addEventListener(t,function(d){const r={event:t,element:a,target:d.target};Object.keys(d.detail).forEach(n=>{const p=d.detail[n];r[n]=p}),window.dataLayer.push(r)})}),!0),v=`<div class="card__head" part="head">
+  */const h=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},v=(e,r,a)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:r}),a.forEach(t=>{e.addEventListener(t,function(d){const s={event:t,element:r,target:d.target};Object.keys(d.detail).forEach(i=>{const c=d.detail[i];s[i]=c}),window.dataLayer.push(s)})}),!0),u=`<div class="card__head" part="head">
   <slot name="head"></slot>
 </div>
 <div class="card__badges"><slot name="badges"></slot></div>
@@ -15,19 +15,19 @@
 </div>
 <div class="card__footer" part="footer">
   <slot name="footer"></slot>
-</div>`,u=e=>{e.classList.add("card");const a=e.shadowRoot.querySelector(".card__head"),i=e.shadowRoot.querySelector(".card__body");e.hasAttribute("data-image")&&(a.innerHTML+=`<img src="${e.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),e.hasAttribute("data-total")?i.insertAdjacentHTML("beforeend",`<div class="card__total">${e.getAttribute("data-total")}</div>`):e.querySelector('[slot="total-icon"]')&&i.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),e.querySelector('[slot="badges"]')?e.shadowRoot.querySelector(".card__badges").classList.remove("empty"):e.shadowRoot.querySelector(".card__badges").classList.add("empty")};var f=function(e,a,i,t){function d(r){return r instanceof i?r:new i(function(n){n(r)})}return new(i||(i=Promise))(function(r,n){function p(l){try{s(t.next(l))}catch(c){n(c)}}function o(l){try{s(t.throw(l))}catch(c){n(c)}}function s(l){l.done?r(l.value):d(l.value).then(p,o)}s((t=t.apply(e,a||[])).next())})};g("iam-card");class w extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
+</div>`,f=e=>{e.classList.add("card");const r=e.shadowRoot.querySelector(".card__head"),a=e.shadowRoot.querySelector(".card__body");e.hasAttribute("data-image")&&(r.innerHTML+=`<img src="${e.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),e.hasAttribute("data-total")?a.insertAdjacentHTML("beforeend",`<div class="card__total">${e.getAttribute("data-total")}</div>`):e.querySelector('[slot="total-icon"]')&&a.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),e.querySelector('[slot="badges"]')?e.shadowRoot.querySelector(".card__badges").classList.remove("empty"):e.shadowRoot.querySelector(".card__badges").classList.add("empty")};var w=function(e,r,a,t){function d(s){return s instanceof a?s:new a(function(i){i(s)})}return new(a||(a=Promise))(function(s,i){function c(n){try{o(t.next(n))}catch(l){i(l)}}function p(n){try{o(t.throw(n))}catch(l){i(l)}}function o(n){n.done?s(n.value):d(n.value).then(c,p)}o((t=t.apply(e,r||[])).next())})};h("iam-card");class _ extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const r=document.createElement("template");r.innerHTML=`
     <style>
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     
-    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}dialog[open]{display:flex;flex-direction:column}dialog[open]>*:last-child{margin-bottom:0}dialog[open]>:is(p):last-child{padding-bottom:0}}@layer elements{.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover);filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:8.75rem !important;max-width:17.5rem !important;padding:1rem;margin:0}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:2px;background:var(--colour-border);margin-left:-1rem;margin-right:-1rem;margin-block:.25rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem;margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}}@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide, 0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.dialog__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.dialog__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(top);position-anchor:--anchor-el;left:anchor(right);right:auto;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>button[popovertarget]{margin:0;anchor-name:--anchor-el}.dialog__wrapper>button[popovertarget]:not(:hover,:focus,:focus-within,:active){background:var(--ellipsis-bg)}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
+    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}dialog[open]{display:flex;flex-direction:column}dialog[open]>*:last-child{margin-bottom:0}dialog[open]>:is(p):last-child{padding-bottom:0}}.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover);filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(bottom) !important;left:anchor(left) !important;position-try-fallbacks:flip-block,flip-inline !important;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:10rem !important;max-width:15rem !important;padding:var(--menu-padding, 0.5rem);margin:0;background:var(--menu-bg, canvas);border:var(--menu-border, 2px solid grey);overflow:auto;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1)}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem;margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{background:unset;border:unset;color:var(--colour-primary);font-weight:inherit;font-family:inherit;font-size:1rem;line-height:1.1875rem;display:block;margin:var(--menu-item-margin, 0 0 0.25rem 0);padding-block:var(--menu-item-padding, 0.5rem);width:var(--menu-item-width, 100%);max-width:var(--menu-item-width, 100%);text-align:var(--menu-item-text-align, left)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:hover,:focus){background:var(--colour-light) !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:active){background:#e0e0e0 !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@media screen and (prefers-color-scheme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide, 0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.menu__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.menu__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
 
     </style>
-    ${v}
+    ${u}
     <slot name="primary-action"></slot>
-    `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){return f(this,void 0,void 0,function*(){var a,i;const t=this,d=t.shadowRoot.querySelector(".card__body");if(u(t),t.hasAttribute("data-illustration")&&d.insertAdjacentHTML("afterbegin",`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`),!t.querySelector('[slot="btns"]')&&!t.querySelector('[slot="secondary"]')&&t.classList.add("show-icon"),t.querySelector('[slot="btns"]')&&(t.shadowRoot.innerHTML+=`<div class="dialog__wrapper">
-      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
-      <div class="dialog--fix dialog--list" id="actions" popover>
+    `,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){return w(this,void 0,void 0,function*(){var r,a;const t=this,d=t.shadowRoot.querySelector(".card__body"),s=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets";if(window.customElements.get("iam-menu")||import(`${s}/js/components/menu/menu.component.js`).then(o=>{window.customElements.define("iam-menu",o.default)}).catch(o=>{console.log(o.message)}),f(t),t.hasAttribute("data-illustration")&&d.insertAdjacentHTML("afterbegin",`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`),!t.querySelector('[slot="btns"]')&&!t.querySelector('[slot="secondary"]')&&t.classList.add("show-icon"),t.querySelector('[slot="btns"]')&&(t.shadowRoot.innerHTML+=`<div class="menu__wrapper">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
+      <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
         <slot name="btns"></slot>
-      </div>
-    </div>`,!CSS.supports("top","anchor(top)"))){const o=(a=this.shadowRoot)===null||a===void 0?void 0:a.querySelector('[popovertarget="actions"]'),s=(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("[popover]");o?.addEventListener("click",l=>{this.style.setProperty("overflow","visible"),this.style.setProperty("z-index","999999");const c=o.getBoundingClientRect(),m=c.top,b=c.left;s.style.setProperty("display","block"),s.style.setProperty("top",m+"px"),s.style.setProperty("left",b-100+"px")}),document.addEventListener("scroll",l=>{s.style.setProperty("display","none")})}if(Array.from(t.querySelectorAll('[slot="btns"]')).forEach(o=>{o.classList.add("btn"),o.classList.add("btn-action")}),t.querySelector('[slot="checkbox"],[slot="secondary"]')){const o=t.querySelector('[slot="checkbox"],[slot="secondary"]');o.addEventListener("mouseenter",()=>{t.classList.add("prevent-hover")}),o.addEventListener("mouseleave",()=>{t.classList.remove("prevent-hover")})}if(t.shadowRoot.querySelector(".dialog__wrapper")){const o=t.shadowRoot.querySelector(".dialog__wrapper");o.addEventListener("mouseenter",()=>{t.classList.add("prevent-hover")}),o.addEventListener("mouseleave",()=>{t.classList.remove("prevent-hover")})}const r=t.querySelector('input[type="checkbox"]');r&&r.addEventListener("change",()=>{if(r.checked){const o=new CustomEvent("select-card",{detail:{"Card value":r.value,"input name":r.getAttribute("name")}});t.dispatchEvent(o)}else{const o=new CustomEvent("unselect-card",{detail:{"Card value":r.value,"input name":r.getAttribute("name")}});t.dispatchEvent(o)}});const n=t.querySelector('[slot="secondary"]');n&&n.addEventListener("click",()=>{const o=new CustomEvent("secondary-button-clicked",{detail:{Title:n.getAttribute("title")}});t.dispatchEvent(o)});const p=t.querySelectorAll('[slot="btns"]');Array.from(p).forEach(o=>{o.addEventListener("click",()=>{const s=new CustomEvent("action-button-clicked",{detail:{Title:o.getAttribute("title")}});t.dispatchEvent(s)})}),h(t,"iam-card",["select-card","unselect-card","secondary-button-clicked","action-button-clicked"])})}static get observedAttributes(){return["data-image"]}attributeChangedCallback(a,i,t){switch(a){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=t);break}case"data-image":{if(i!=t){const d=this.shadowRoot.querySelector(".card__head img");d&&d.setAttribute("src",t)}break}}}}export{w as default};
+      </iam-menu>
+    </div>`,!CSS.supports("top","anchor(top)"))){const o=(r=this.shadowRoot)===null||r===void 0?void 0:r.querySelector('[popovertarget="actions"]'),n=(a=this.shadowRoot)===null||a===void 0?void 0:a.querySelector("[popover]");o?.addEventListener("click",l=>{this.style.setProperty("overflow","visible"),this.style.setProperty("z-index","999999");const m=o.getBoundingClientRect(),b=m.top,g=m.left;n.style.setProperty("display","block"),n.style.setProperty("top",b+"px"),n.style.setProperty("left",g-100+"px")}),document.addEventListener("scroll",l=>{n.style.setProperty("display","none")})}if(Array.from(t.querySelectorAll('[slot="btns"]')).forEach(o=>{o.classList.add("btn"),o.classList.add("btn-action")}),t.querySelector('[slot="checkbox"],[slot="secondary"]')){const o=t.querySelector('[slot="checkbox"],[slot="secondary"]');o.addEventListener("mouseenter",()=>{t.classList.add("prevent-hover")}),o.addEventListener("mouseleave",()=>{t.classList.remove("prevent-hover")})}if(t.shadowRoot.querySelector(".menu__wrapper")){const o=t.shadowRoot.querySelector(".menu__wrapper");o.addEventListener("mouseenter",()=>{t.classList.add("prevent-hover")}),o.addEventListener("mouseleave",()=>{t.classList.remove("prevent-hover")})}const i=t.querySelector('input[type="checkbox"]');i&&i.addEventListener("change",()=>{if(i.checked){const o=new CustomEvent("select-card",{detail:{"Card value":i.value,"input name":i.getAttribute("name")}});t.dispatchEvent(o)}else{const o=new CustomEvent("unselect-card",{detail:{"Card value":i.value,"input name":i.getAttribute("name")}});t.dispatchEvent(o)}});const c=t.querySelector('[slot="secondary"]');c&&c.addEventListener("click",()=>{const o=new CustomEvent("secondary-button-clicked",{detail:{Title:c.getAttribute("title")}});t.dispatchEvent(o)});const p=t.querySelectorAll('[slot="btns"]');Array.from(p).forEach(o=>{o.addEventListener("click",()=>{const n=new CustomEvent("action-button-clicked",{detail:{Title:o.getAttribute("title")}});t.dispatchEvent(n)})}),v(t,"iam-card",["select-card","unselect-card","secondary-button-clicked","action-button-clicked"])})}static get observedAttributes(){return["data-image"]}attributeChangedCallback(r,a,t){switch(r){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=t);break}case"data-image":{if(a!=t){const d=this.shadowRoot.querySelector(".card__head img");d&&d.setAttribute("src",t)}break}}}}export{_ as default};
 //# sourceMappingURL=card.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","card.component.js"],"sourcesContent":["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","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\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};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\ntrackComponentRegistered('iam-card');\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <slot name=\"primary-action\"></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const cardComponent = this;\n            const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n            setupCard(cardComponent);\n            // Add Illustration HTML\n            if (cardComponent.hasAttribute('data-illustration')) {\n                cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n            }\n            // Add class that shows the right arrow icon\n            if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n                cardComponent.classList.add('show-icon');\n            }\n            // Secondary buttons and actions\n            // Add the dialog wrapper HTML\n            if (cardComponent.querySelector('[slot=\"btns\"]')) {\n                cardComponent.shadowRoot.innerHTML += `<div class=\"dialog__wrapper\">\n      <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical\" popovertarget=\"actions\" title=\"Further actions\" type=\"button\">Open further actions</button>\n      <div class=\"dialog--fix dialog--list\" id=\"actions\" popover>\n        <slot name=\"btns\"></slot>\n      </div>\n    </div>`;\n                // safari and firefox anchor fix for cards\n                if (!CSS.supports('top', 'anchor(top)')) {\n                    const actionButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popovertarget=\"actions\"]');\n                    const actionPopover = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[popover]');\n                    actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', (event) => {\n                        this.style.setProperty('overflow', 'visible');\n                        this.style.setProperty('z-index', '999999');\n                        const viewportOffset = actionButton.getBoundingClientRect();\n                        const top = viewportOffset.top;\n                        const left = viewportOffset.left;\n                        actionPopover.style.setProperty('display', 'block');\n                        actionPopover.style.setProperty('top', top + 'px');\n                        actionPopover.style.setProperty('left', (left - 100) + 'px');\n                    });\n                    document.addEventListener(\"scroll\", (event) => {\n                        actionPopover.style.setProperty('display', 'none');\n                    });\n                }\n            }\n            // Make sure slotted buttons and links have correct button classes\n            Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button) => {\n                button.classList.add('btn');\n                button.classList.add('btn-action');\n            });\n            // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n            if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n                const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n                element.addEventListener('mouseenter', () => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', () => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {\n                const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');\n                element.addEventListener('mouseenter', () => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', () => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            // Dispatch events of selecting checkboxes\n            const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n            if (checkbox) {\n                checkbox.addEventListener('change', () => {\n                    if (checkbox.checked) {\n                        const customEvent = new CustomEvent('select-card', {\n                            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n                        });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                    else {\n                        const customEvent = new CustomEvent('unselect-card', {\n                            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n                        });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                });\n            }\n            // Dispatch events of click onto secondary buttons\n            const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n            if (secondaryBtn) {\n                secondaryBtn.addEventListener('click', () => {\n                    const customEvent = new CustomEvent('secondary-button-clicked', {\n                        detail: { Title: secondaryBtn.getAttribute('title') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            // Dispatch events of click onto action buttons\n            const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n            Array.from(actionBtns).forEach((button) => {\n                button.addEventListener('click', () => {\n                    const customEvent = new CustomEvent('action-button-clicked', {\n                        detail: { Title: button.getAttribute('title') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            });\n            trackComponent(cardComponent, 'iam-card', [\n                'select-card',\n                'unselect-card',\n                'secondary-button-clicked',\n                'action-button-clicked',\n            ]);\n        });\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-total': {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","template","_a","_b","actionButton","actionPopover","viewportOffset","top","left","button","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
+{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","card.component.js"],"sourcesContent":["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","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\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};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\ntrackComponentRegistered('iam-card');\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <slot name=\"primary-action\"></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const cardComponent = this;\n            const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n            const assetLocation = document.body.hasAttribute('data-assets-location')\n                ? document.body.getAttribute('data-assets-location')\n                : '/assets';\n            if (!window.customElements.get(`iam-menu`)) {\n                import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)\n                    .then((module) => {\n                    window.customElements.define(`iam-menu`, module.default);\n                })\n                    .catch((err) => {\n                    console.log(err.message);\n                });\n            }\n            setupCard(cardComponent);\n            // Add Illustration HTML\n            if (cardComponent.hasAttribute('data-illustration')) {\n                cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n            }\n            // Add class that shows the right arrow icon\n            if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n                cardComponent.classList.add('show-icon');\n            }\n            // Secondary buttons and actions\n            // Add the dialog wrapper HTML\n            if (cardComponent.querySelector('[slot=\"btns\"]')) {\n                cardComponent.shadowRoot.innerHTML += `<div class=\"menu__wrapper\">\n      <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical m-0\" popovertarget=\"actions\" style=\"anchor-name: --anchor-el;\" title=\"Further actions\" type=\"button\">Open further actions</button>\n      <iam-menu class=\"dialog--fix dialog--list\" id=\"actions\" style=\"position-anchor: --anchor-el;\" popover>\n        <slot name=\"btns\"></slot>\n      </iam-menu>\n    </div>`;\n                // safari and firefox anchor fix for cards\n                if (!CSS.supports('top', 'anchor(top)')) {\n                    const actionButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popovertarget=\"actions\"]');\n                    const actionPopover = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[popover]');\n                    actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', (event) => {\n                        this.style.setProperty('overflow', 'visible');\n                        this.style.setProperty('z-index', '999999');\n                        const viewportOffset = actionButton.getBoundingClientRect();\n                        const top = viewportOffset.top;\n                        const left = viewportOffset.left;\n                        actionPopover.style.setProperty('display', 'block');\n                        actionPopover.style.setProperty('top', top + 'px');\n                        actionPopover.style.setProperty('left', left - 100 + 'px');\n                    });\n                    document.addEventListener('scroll', (event) => {\n                        actionPopover.style.setProperty('display', 'none');\n                    });\n                }\n            }\n            // Make sure slotted buttons and links have correct button classes\n            Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button) => {\n                button.classList.add('btn');\n                button.classList.add('btn-action');\n            });\n            // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n            if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n                const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n                element.addEventListener('mouseenter', () => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', () => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {\n                const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');\n                element.addEventListener('mouseenter', () => {\n                    cardComponent.classList.add('prevent-hover');\n                });\n                element.addEventListener('mouseleave', () => {\n                    cardComponent.classList.remove('prevent-hover');\n                });\n            }\n            // Dispatch events of selecting checkboxes\n            const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n            if (checkbox) {\n                checkbox.addEventListener('change', () => {\n                    if (checkbox.checked) {\n                        const customEvent = new CustomEvent('select-card', {\n                            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n                        });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                    else {\n                        const customEvent = new CustomEvent('unselect-card', {\n                            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n                        });\n                        cardComponent.dispatchEvent(customEvent);\n                    }\n                });\n            }\n            // Dispatch events of click onto secondary buttons\n            const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n            if (secondaryBtn) {\n                secondaryBtn.addEventListener('click', () => {\n                    const customEvent = new CustomEvent('secondary-button-clicked', {\n                        detail: { Title: secondaryBtn.getAttribute('title') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            // Dispatch events of click onto action buttons\n            const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n            Array.from(actionBtns).forEach((button) => {\n                button.addEventListener('click', () => {\n                    const customEvent = new CustomEvent('action-button-clicked', {\n                        detail: { Title: button.getAttribute('title') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            });\n            trackComponent(cardComponent, 'iam-card', [\n                'select-card',\n                'unselect-card',\n                'secondary-button-clicked',\n                'action-button-clicked',\n            ]);\n        });\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-total': {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","template","_a","_b","assetLocation","module","err","actionButton","actionPopover","viewportOffset","top","left","button","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}