@iamproperty/components 5.7.1-beta5 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/assets/css/components/barchart.component.css +1 -1
  2. package/assets/css/components/barchart.component.css.map +1 -1
  3. package/assets/css/components/card.css +1 -1
  4. package/assets/css/components/card.css.map +1 -1
  5. package/assets/css/components/card.global.css +1 -1
  6. package/assets/css/components/card.global.css.map +1 -1
  7. package/assets/css/components/charts.config.css +1 -1
  8. package/assets/css/components/charts.config.css.map +1 -1
  9. package/assets/css/components/charts.module.css +1 -1
  10. package/assets/css/components/charts.module.css.map +1 -1
  11. package/assets/css/core.min.css +1 -1
  12. package/assets/css/core.min.css.map +1 -1
  13. package/assets/css/style.min.css +1 -1
  14. package/assets/css/style.min.css.map +1 -1
  15. package/assets/js/components/_global.js +32 -0
  16. package/assets/js/components/accordion/accordion.component.min.js +1 -1
  17. package/assets/js/components/actionbar/actionbar.component.min.js +1 -1
  18. package/assets/js/components/address-lookup/address-lookup.component.min.js +1 -1
  19. package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
  20. package/assets/js/components/barchart/barchart.component.js +11 -10
  21. package/assets/js/components/barchart/barchart.component.min.js +4 -6
  22. package/assets/js/components/barchart/barchart.component.min.js.map +1 -1
  23. package/assets/js/components/card/card.component.js +29 -4
  24. package/assets/js/components/card/card.component.min.js +15 -8
  25. package/assets/js/components/card/card.component.min.js.map +1 -1
  26. package/assets/js/components/carousel/carousel.component.min.js +1 -1
  27. package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
  28. package/assets/js/components/fileupload/fileupload.component.min.js +1 -1
  29. package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
  30. package/assets/js/components/header/header.component.min.js +1 -1
  31. package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
  32. package/assets/js/components/marketing/marketing.component.min.js +1 -1
  33. package/assets/js/components/multiselect/multiselect.component.min.js +1 -1
  34. package/assets/js/components/nav/nav.component.min.js +1 -1
  35. package/assets/js/components/notification/notification.component.min.js +1 -1
  36. package/assets/js/components/pagination/pagination.component.min.js +1 -1
  37. package/assets/js/components/search/search.component.min.js +1 -1
  38. package/assets/js/components/slider/slider.component.min.js +1 -1
  39. package/assets/js/components/table/table.component.min.js +1 -1
  40. package/assets/js/components/tabs/tabs.component.min.js +1 -1
  41. package/assets/js/dynamic.min.js +1 -1
  42. package/assets/js/modules/chart.module.js +68 -88
  43. package/assets/js/scripts.bundle.js +22 -15
  44. package/assets/js/scripts.bundle.js.map +1 -1
  45. package/assets/js/scripts.bundle.min.js +2 -2
  46. package/assets/js/scripts.bundle.min.js.map +1 -1
  47. package/assets/js/tests/chart.spec.js +57 -0
  48. package/assets/sass/components/barchart.component.scss +47 -3
  49. package/assets/sass/components/card.global.scss +7 -1
  50. package/assets/sass/components/card.scss +114 -45
  51. package/assets/sass/components/charts.config.scss +15 -10
  52. package/assets/sass/components/charts.module.scss +19 -4
  53. package/assets/sass/elements/badge-tag.scss +6 -0
  54. package/assets/sass/elements/dialog.scss +6 -2
  55. package/assets/ts/components/_global.ts +40 -0
  56. package/assets/ts/components/barchart/barchart.component.ts +13 -19
  57. package/assets/ts/components/card/card.component.ts +35 -4
  58. package/assets/ts/modules/chart.module.ts +89 -108
  59. package/assets/ts/tests/chart.spec.ts +77 -0
  60. package/dist/components.es.js +11 -11
  61. package/dist/components.umd.js +54 -47
  62. package/package.json +1 -1
  63. package/src/components/BarChart/BarChart.vue +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"barchart.component.min.js","sources":["../../modules/helpers.js","../../modules/chart.module.js","barchart.component.js"],"sourcesContent":["// @ts-nocheck\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 return null;\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 () { checkElements(location.hash); }, false);\n addEventListener(\"popstate\", (event) => {\n if (event && event.state && event.state.type && event.state.type == \"pagination\") {\n let form = document.querySelector(`#${event.state.form}`);\n let 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 let form = event.target;\n // Reset password types\n Array.from(form.querySelectorAll('[data-password-type]')).forEach((input, index) => {\n input.setAttribute('type', 'password');\n });\n if (form.querySelector(':invalid') || form.querySelector('.pwd-checker[data-strength=\"1\"]') || 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, index) => {\n let label = progress.closest('label');\n label.setAttribute('data-percent', progress.getAttribute('value'));\n });\n return null;\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.split(' ').map(s => ucfirst(s)).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 let convertStart = startDateString.split('/');\n let convertEnd = endDateString.split('/');\n let dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n let 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 let diffTime = dateEnd.getTime() - dateStart.getTime();\n let 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.split(/[\\.\\[\\]\\'\\\"]/).filter(p => p).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 let pageWidth = window.innerWidth || document.body.clientWidth;\n let treshold = Math.max(1, Math.floor(0.01 * (pageWidth)));\n let x = touchendX - touchstartX;\n let y = touchendY - touchstartY;\n let xy = Math.abs(x / y);\n let 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};\n","import { numberOfDays } from './helpers.js';\n// #region Functions that setup and trigger other functions \nexport const addClasses = (chartElement) => {\n // add colour classes\n for (let i = 1; i <= 10; i++) {\n if (chartElement.hasAttribute(`data-colour-${i}`)) {\n let colour = chartElement.getAttribute(`data-colour-${i}`);\n chartElement.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);\n chartElement.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);\n }\n }\n return true;\n};\nexport const setupChart = (chartElement, chartOuter, tableElement) => {\n // #region Reset the chart\n // empty divs to re-populate\n const chartKey = chartOuter.querySelector('.chart__key');\n chartKey.innerHTML = '';\n const chartGuidelines = chartOuter.querySelector('.chart__guidelines');\n chartGuidelines.innerHTML = ``;\n const chartYaxis = chartOuter.querySelector('.chart__yaxis');\n chartYaxis.innerHTML = ``;\n // Remove old input fields\n Array.from(chartOuter.querySelectorAll(':scope > input[type=\"checkbox\"],:scope > input[type=\"radio\"]')).map((element) => { element.remove(); });\n // #endregion\n let { xaxis } = getChartData(chartElement, chartOuter);\n setCellData(chartElement, chartOuter, tableElement);\n createChartKey(chartOuter, tableElement, chartKey);\n createChartGuidelines(chartElement, chartOuter, chartGuidelines);\n createChartYaxis(chartElement, chartOuter, chartYaxis);\n if (xaxis) {\n createXaxis(chartElement, chartOuter, xaxis);\n }\n return true;\n};\n// #endregion\n// #region Event handlers and observers\nexport const setEventListener = function (chartOuter) {\n let chart = chartOuter.querySelector('.chart');\n chart.addEventListener('mousemove', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('td:not(:first-child')) {\n let column = event.target.closest('td:not(:first-child');\n var rect = column.getBoundingClientRect();\n let x = event.clientX - rect.left;\n let y = event.clientY - rect.top;\n chart.setAttribute('style', `--cursor-x: ${x}px; --cursor-y: ${y}px;`);\n }\n });\n // Use the part for the chart items to pass through states to the pages CSS\n let labels = chartOuter.querySelectorAll('label');\n Array.from(labels).forEach((label) => {\n if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)\n label.setAttribute('part', 'key-checked');\n else\n label.setAttribute('part', 'key-unchecked');\n });\n chartOuter.addEventListener('change', function () {\n Array.from(labels).forEach((label) => {\n if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)\n label.setAttribute('part', 'key-checked');\n else\n label.setAttribute('part', 'key-unchecked');\n });\n });\n};\nexport const setEventObservers = function (chartElement, chartOuter) {\n let table = chartElement.querySelector('table');\n let shadowTable = chartOuter.querySelector('table');\n const attributesUpdated = (mutationList, observer) => {\n observer.disconnect();\n observer2.disconnect();\n for (const mutation of mutationList) {\n if (mutation.attributeName == 'class' || (mutation.type === 'attributes' && mutation.attributeName === 'data-total') || mutation.type === 'attributes') {\n shadowTable.innerHTML = table.innerHTML;\n setupChart(chartElement, chartOuter, shadowTable);\n }\n }\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n };\n const tableUpdated = (mutationList, observer) => {\n observer.disconnect();\n observer2.disconnect();\n for (const mutation of mutationList) {\n if (mutation.type == \"characterData\" || (mutation.type == \"childList\" && mutation.addedNodes.length)) {\n shadowTable.innerHTML = table.innerHTML;\n setupChart(chartElement, chartOuter, shadowTable);\n }\n }\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n };\n let observer = new MutationObserver(tableUpdated);\n let observer2 = new MutationObserver(attributesUpdated);\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n return true;\n};\n// #endregion\n// #region GET functions\nexport const getChartData = function (chartElement, chartOuter) {\n let table = chartOuter.querySelector('.chart__wrapper table');\n let min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;\n let max = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(table);\n let type = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';\n let yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];\n let guidelines = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];\n let targets = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;\n let events = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;\n let xaxis = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;\n let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment') : null;\n let start = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;\n let end = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(table); // TODO - get largest value from the data-xaxis\n let slope = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;\n let yInt = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;\n return { min, max, type, yaxis, targets, events, xaxis, increment, start, end, slope, yInt, guidelines };\n};\nfunction getLargestValue(table) {\n let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element) => {\n let currentValue = String(element.textContent);\n currentValue = currentValue.replace('£', '');\n currentValue = currentValue.replace('%', '');\n currentValue = currentValue.replace(',', '');\n currentValue = Number.parseFloat(currentValue);\n return currentValue;\n });\n let largetValue = Math.max(...values);\n // TO DO round to the nearest 10, 100, 1000 and so on\n return Math.ceil(largetValue);\n}\nconst getValues = function (value, min, max, start) {\n let cleanValue = String(value);\n cleanValue = cleanValue.replace('£', '');\n cleanValue = cleanValue.replace('%', '');\n cleanValue = cleanValue.replace(',', '');\n cleanValue = Number.parseFloat(cleanValue);\n let percent = ((cleanValue - min) / (max - min)) * 100;\n let axis = percent;\n let bottom = 0;\n if (start && start != 0) {\n bottom = ((start - min) / (max - min)) * 100;\n }\n // If the value is negative the position below the 0 line\n if (min < 0) {\n bottom = Math.abs(((min) / (max - min)) * 100);\n if (cleanValue < 0) {\n percent = bottom - percent;\n bottom = bottom - percent;\n axis = bottom;\n }\n else {\n percent = percent - bottom;\n axis = percent + bottom;\n }\n }\n return { percent, axis, bottom };\n};\n// #endregion\n// #region SET functions - set data attributes and classes\nexport const setCellData = function (chartElement, chartOuter, table) {\n let { min, max } = getChartData(chartElement, chartOuter);\n let increment = chartElement.getAttribute('data-increment');\n let startDay = min;\n Array.from(table.querySelectorAll('tbody tr')).forEach((tr, index) => {\n let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').textContent : '';\n tr.setAttribute('part', 'group');\n // Set the data numeric value if not set\n Array.from(tr.querySelectorAll('td:not([data-numeric]):not(:first-child)')).forEach((td) => {\n let value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));\n let start = 0;\n if (increment == \"days\") {\n let dates = td.textContent.split(' - ');\n if (dates[1]) {\n value = numberOfDays(dates[0], dates[1]);\n start = numberOfDays(startDay, dates[0]) - 1;\n }\n }\n td.setAttribute('data-numeric', value);\n td.setAttribute('data-value', td.textContent);\n td.setAttribute('data-start', start);\n });\n // Set the data label value if not set\n Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td, index) => {\n if (index == 0)\n td.setAttribute('part', 'xaxis-label'); // PART\n else\n td.setAttribute('part', 'value');\n if (tr.querySelectorAll('td').length > 2)\n td.setAttribute('data-label', table.querySelectorAll('thead th')[index].textContent);\n });\n /*\n if(tr.querySelector('[data-label=\"Total\"]')){\n tr.setAttribute('data-total',tr.querySelector('[data-label=\"Total\"][data-numeric]').getAttribute('data-numeric'));\n }\n \n if(tr.querySelector('[data-label=\"Min\"]')){\n tr.setAttribute('data-min',tr.querySelector('[data-label=\"Min\"][data-numeric]').getAttribute('data-numeric'));\n }\n if(tr.querySelector('[data-label=\"Max\"]')){\n tr.setAttribute('data-max',tr.querySelector('[data-label=\"Max\"][data-numeric]').getAttribute('data-numeric'));\n }\n \n */\n let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;\n let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;\n if (rowMin < 0) {\n let minBottom = Math.abs(((rowMin) / (rowMax - rowMin)) * 100);\n chartElement.setAttribute('style', `--min-bottom: ${minBottom}%;`);\n }\n // Add a useful index css var for the use of animatons.\n tr.style.setProperty('--row-index', index + 1);\n // Add css vars to cells\n Array.from(tr.querySelectorAll('td[data-numeric]:not([data-label=\"Min\"]):not([data-label=\"Max\"]):not(:first-child)')).forEach((td) => {\n let display = getComputedStyle(td).display;\n if (display == 'none')\n return;\n const content = td.innerHTML;\n const value = Number.parseFloat(td.getAttribute('data-numeric'));\n const start = Number.parseFloat(td.getAttribute('data-start'));\n if (!td.querySelector('span[data-group]'))\n td.innerHTML = `<span data-group=\"${group}\" ${td.hasAttribute('data-label') ? `data-label=\"${td.getAttribute('data-label')}\"` : ''} part=\"popover\">${content}</span>`;\n if (!td.hasAttribute('style')) {\n let { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);\n td.setAttribute('data-percent', percent);\n td.setAttribute(\"style\", `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);\n }\n });\n });\n};\nexport const setLongestLabel = function (chartOuter) {\n let chartWrapper = chartOuter.querySelector('.chart__wrapper');\n let chartSpacer = chartOuter.querySelector('.chart__spacer span');\n let table = chartOuter.querySelector('.chart table');\n // set the longest label attr so that the bar chart knows what margin to set on the left\n let longestLabel = '';\n Array.from(table.querySelectorAll('tbody tr td:first-child')).forEach((td) => {\n if (typeof td.textContent != \"undefined\" && td.textContent.length > longestLabel.length) {\n longestLabel = td.textContent;\n }\n });\n chartWrapper.setAttribute('data-longest-label', longestLabel);\n chartSpacer.innerHTML = longestLabel;\n};\nexport const setLongestValue = function (chartOuter) {\n let chartWrapper = chartOuter.querySelector('.chart__wrapper');\n let table = chartOuter.querySelector('.chart table');\n let longestValue = '';\n Array.from(table.querySelectorAll('tbody tr td:not(:first-child) span')).forEach((td) => {\n if (typeof td.textContent != \"undefined\" && td.textContent.length > longestValue.length)\n longestValue = td.textContent;\n });\n chartWrapper.setAttribute('data-longest-value', longestValue);\n};\n// #endregion\n// #region CREATE function\nexport const createChartKey = function (chartOuter, tableElement, chartKey) {\n const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;\n //const chartOuter = chartElement.querySelector('.chart__outer');\n let previousInput;\n let headings = Array.from(tableElement.querySelectorAll('thead th'));\n headings.forEach((arrayElement, index) => {\n if (index != 0) {\n previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);\n }\n if (index == 50) {\n headings.length = index + 1;\n }\n });\n return true;\n};\nfunction createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {\n let input = document.createElement('input');\n input.setAttribute('name', `${chartID}-dataset-${index}`);\n input.setAttribute('id', `${chartID}-dataset-${index}`);\n input.checked = true;\n input.setAttribute('type', `checkbox`);\n if (index == 1)\n chartOuter.prepend(input);\n else\n chartOuter.insertBefore(input, previousInput.nextSibling);\n previousInput = input;\n let label = document.createElement('label');\n label.setAttribute('class', `key btn btn-action`);\n label.setAttribute('for', `${chartID}-dataset-${index}`);\n label.setAttribute('data-label', `${text}`);\n label.setAttribute('part', `key`);\n label.innerHTML = `${text}`;\n chartKey.append(label);\n return previousInput;\n}\nexport const createChartGuidelines = function (chartElement, chartOuter, chartGuidelines) {\n let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);\n if (!guidelines.length)\n guidelines = yaxis;\n if (increment == \"days\") {\n max = numberOfDays(min, max);\n min = 0;\n }\n chartGuidelines.innerHTML = '';\n for (var i = 0; i < guidelines.length; i++) {\n let value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));\n let { axis } = getValues(value, min, max);\n chartGuidelines.innerHTML += `<div class=\"guideline\" style=\"--percent:${axis}%;\">${yaxis.indexOf(guidelines[i]) != -1 ? `<span>${guidelines[i]}</span>` : ''}</div>`;\n }\n};\nexport const createChartYaxis = function (chartElement, chartOuter, chartYaxis) {\n let { min, max, yaxis, increment } = getChartData(chartElement, chartOuter);\n let startDay = min;\n if (increment == \"days\") {\n max = numberOfDays(min, max);\n min = 0;\n }\n chartYaxis.innerHTML = '';\n for (var i = 0; i < yaxis.length; i++) {\n let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));\n if (increment == \"days\") {\n value = numberOfDays(startDay, yaxis[i]);\n }\n let { axis } = getValues(value, min, max);\n chartYaxis.innerHTML += `<div class=\"axis__point\" style=\"--percent:${axis}%;\"><span>${yaxis[i]}</span></div>`;\n }\n};\nexport const createXaxis = function (chartElement, chartOuter, xaxis) {\n const chart = chartOuter.querySelector('.chart');\n let chartXaxis = chartOuter.querySelector('.chart__xaxis');\n let { increment, start, end } = getChartData(chartElement, chartOuter);\n if (!chartXaxis) {\n chartXaxis = document.createElement('div');\n chartXaxis.setAttribute('class', 'chart__xaxis');\n }\n if (increment && start && end) {\n chartXaxis.innerHTML = '';\n for (var i = 0; i < xaxis.length; i++) {\n let value = parseFloat(xaxis[i].replace('£', '').replace('%', ''));\n let position = ((value - start) / (end - start)) * 100;\n chartXaxis.innerHTML += `<div class=\"axis__point\" style=\"--percent:${position}%;\"><span>${xaxis[i]}</span></div>`;\n }\n }\n chart.prepend(chartXaxis);\n};\nexport const createTooltips = function (chartOuter) {\n const titles = chartOuter.querySelectorAll('thead th[title], tbody th[title]:first-child, tbody td[title]:first-child');\n Array.from(titles).forEach((title) => {\n let tooltipId = `tooltip-${Date.now()}-${Math.floor(Math.random() * 100)}`;\n title.innerHTML = `<button class=\"tooltip\" popovertarget=\"${tooltipId}\" part=\"tooltip\" style=\"anchor-name: --${tooltipId};\">${title.textContent}</button><span id=\"${tooltipId}\" style=\"position-anchor: --${tooltipId};\" popover part=\"tooltip__content\" class=\"tooltip__content\">${title.getAttribute('title')}</span>`;\n //title.removeAttribute('title'); // TODO add a supports query for anchor positioning\n });\n};\n// #endregion\nexport default setupChart;\n","// @ts-nocheck\nimport { addClasses, setupChart, setEventListener, setEventObservers, setLongestLabel, setLongestValue, createTooltips } from \"../../modules/chart.module.js\";\n// TODO: tooltip\n// TODO: responsive 'fit-content' classes done through JS\nclass iamBarChart extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/barchart.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${loadCSS}\n </style>\n <slot name=\"before\"></slot>\n <div class=\"chart__outer\" part=\"outer\">\n <div class=\"chart__key\" part=\"chart-key\"></div>\n <div class=\"chart__wrapper\" part=\"wrapper\">\n <div class=\"chart__yaxis\" part=\"yaxis\"></div>\n <div class=\"chart\" part=\"chart\">\n <div class=\"chart__guidelines\" part=\"guidelines\"></div>\n </div>\n </div>\n <div class=\"chart__spacer\"><span part=\"spacer\"></span</div>\n </div>\n <slot name=\"after\"></slot>`;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const chartComponent = this;\n const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;\n const orginalTable = this.querySelector('table');\n const clonedTable = orginalTable.cloneNode(true);\n const chart = this.shadowRoot.querySelector('.chart');\n const chartOuter = this.shadowRoot.querySelector('.chart__outer');\n chart.appendChild(clonedTable);\n addClasses(chartComponent);\n const barCount = chart.querySelectorAll('td:not(:first-child)').length;\n if (barCount < 10) {\n chartComponent.classList.add('chart--fit-content');\n chartComponent.classList.add('chart--display-data');\n }\n setupChart(chartComponent, chartOuter, clonedTable);\n setEventObservers(chartComponent, chartOuter);\n setEventListener(chartOuter);\n setLongestLabel(chartOuter);\n setLongestValue(chartOuter);\n createTooltips(chartOuter);\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n }\n}\nexport default iamBarChart;\n"],"names":["numberOfDays","startDateString","endDateString","convertStart","convertEnd","dateStart","dateEnd","addClasses","chartElement","i","colour","setupChart","chartOuter","tableElement","chartKey","chartGuidelines","chartYaxis","element","xaxis","getChartData","setCellData","createChartKey","createChartGuidelines","createChartYaxis","createXaxis","setEventListener","chart","event","rect","x","y","labels","label","setEventObservers","table","shadowTable","attributesUpdated","mutationList","observer","observer2","mutation","tableUpdated","min","max","getLargestValue","type","yaxis","guidelines","targets","events","increment","start","end","slope","yInt","values","currentValue","largetValue","getValues","value","cleanValue","percent","axis","bottom","startDay","tr","index","group","td","dates","rowMin","rowMax","minBottom","content","setLongestLabel","chartWrapper","chartSpacer","longestLabel","setLongestValue","longestValue","chartID","previousInput","headings","arrayElement","createChartKeyItem","text","input","chartXaxis","position","createTooltips","titles","title","tooltipId","iamBarChart","template","chartComponent","clonedTable","attrName","oldVal","newVal"],"mappings":";;;IAiGO,MAAMA,EAAe,SAAUC,EAAiBC,EAAe,CAClE,IAAIC,EAAeF,EAAgB,MAAM,GAAG,EACxCG,EAAaF,EAAc,MAAM,GAAG,EACpCG,EAAY,IAAI,KAAKF,EAAa,CAAC,EAAI,IAAMA,EAAa,CAAC,EAAI,IAAMA,EAAa,CAAC,CAAC,EACpFG,EAAU,IAAI,KAAKF,EAAW,CAAC,EAAI,IAAMA,EAAW,CAAC,EAAI,IAAMA,EAAW,CAAC,CAAC,EAChF,GAAIC,GAAa,eACb,KAAM,iCACV,GAAIC,GAAW,eACX,KAAM,+BAGV,IAAIN,GADWM,EAAQ,QAAS,EAAGD,EAAU,QAAO,IACpB,IAAO,KAAO,IAAM,EACpD,GAAIL,EAAe,EACf,KAAM,+CACV,OAAOA,CACX,EC9GaO,EAAcC,GAAiB,CAExC,QAASC,EAAI,EAAGA,GAAK,GAAIA,IACrB,GAAID,EAAa,aAAa,eAAeC,GAAG,EAAG,CAC/C,IAAIC,EAASF,EAAa,aAAa,eAAeC,GAAG,EACzDD,EAAa,MAAM,YAAY,kBAAkBC,IAAK,sBAAsBC,IAAS,EACrFF,EAAa,MAAM,YAAY,kBAAkBC,UAAW,sBAAsBC,UAAe,EAGzG,MAAO,EACX,EACaC,EAAa,CAACH,EAAcI,EAAYC,IAAiB,CAGlE,MAAMC,EAAWF,EAAW,cAAc,aAAa,EACvDE,EAAS,UAAY,GACrB,MAAMC,EAAkBH,EAAW,cAAc,oBAAoB,EACrEG,EAAgB,UAAY,GAC5B,MAAMC,EAAaJ,EAAW,cAAc,eAAe,EAC3DI,EAAW,UAAY,GAEvB,MAAM,KAAKJ,EAAW,iBAAiB,8DAA8D,CAAC,EAAE,IAAKK,GAAY,CAAEA,EAAQ,OAAQ,CAAG,CAAA,EAE9I,GAAI,CAAE,MAAAC,CAAO,EAAGC,EAAaX,EAAcI,CAAU,EACrD,OAAAQ,EAAYZ,EAAcI,EAAYC,CAAY,EAClDQ,EAAeT,EAAYC,EAAcC,CAAQ,EACjDQ,EAAsBd,EAAcI,EAAYG,CAAe,EAC/DQ,EAAiBf,EAAcI,EAAYI,CAAU,EACjDE,GACAM,EAAYhB,EAAcI,EAAYM,CAAK,EAExC,EACX,EAGaO,EAAmB,SAAUb,EAAY,CAClD,IAAIc,EAAQd,EAAW,cAAc,QAAQ,EAC7Cc,EAAM,iBAAiB,YAAcC,GAAU,CAC3C,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,qBAAqB,EAAG,CAE7F,IAAIC,EADSD,EAAM,OAAO,QAAQ,qBAAqB,EACrC,wBAClB,IAAIE,EAAIF,EAAM,QAAUC,EAAK,KACzBE,EAAIH,EAAM,QAAUC,EAAK,IAC7BF,EAAM,aAAa,QAAS,eAAeG,oBAAoBC,MAAM,EAEjF,CAAK,EAED,IAAIC,EAASnB,EAAW,iBAAiB,OAAO,EAChD,MAAM,KAAKmB,CAAM,EAAE,QAASC,GAAU,CAC9BpB,EAAW,cAAc,SAASoB,EAAM,aAAa,KAAK,GAAG,EAAE,QAC/DA,EAAM,aAAa,OAAQ,aAAa,EAExCA,EAAM,aAAa,OAAQ,eAAe,CACtD,CAAK,EACDpB,EAAW,iBAAiB,SAAU,UAAY,CAC9C,MAAM,KAAKmB,CAAM,EAAE,QAASC,GAAU,CAC9BpB,EAAW,cAAc,SAASoB,EAAM,aAAa,KAAK,GAAG,EAAE,QAC/DA,EAAM,aAAa,OAAQ,aAAa,EAExCA,EAAM,aAAa,OAAQ,eAAe,CAC1D,CAAS,CACT,CAAK,CACL,EACaC,EAAoB,SAAUzB,EAAcI,EAAY,CACjE,IAAIsB,EAAQ1B,EAAa,cAAc,OAAO,EAC1C2B,EAAcvB,EAAW,cAAc,OAAO,EAClD,MAAMwB,EAAoB,CAACC,EAAcC,IAAa,CAClDA,EAAS,WAAU,EACnBC,EAAU,WAAU,EACpB,UAAWC,KAAYH,GACfG,EAAS,eAAiB,SAAYA,EAAS,OAAS,cAAgBA,EAAS,gBAAkB,cAAiBA,EAAS,OAAS,gBACtIL,EAAY,UAAYD,EAAM,UAC9BvB,EAAWH,EAAcI,EAAYuB,CAAW,GAGxDG,EAAS,QAAQJ,EAAO,CAAE,cAAe,GAAM,QAAS,EAAI,CAAE,EAC9DK,EAAU,QAAQ/B,EAAc,CAAE,WAAY,EAAM,CAAA,CAC5D,EACUiC,EAAe,CAACJ,EAAcC,IAAa,CAC7CA,EAAS,WAAU,EACnBC,EAAU,WAAU,EACpB,UAAWC,KAAYH,GACfG,EAAS,MAAQ,iBAAoBA,EAAS,MAAQ,aAAeA,EAAS,WAAW,UACzFL,EAAY,UAAYD,EAAM,UAC9BvB,EAAWH,EAAcI,EAAYuB,CAAW,GAGxDG,EAAS,QAAQJ,EAAO,CAAE,cAAe,GAAM,QAAS,EAAI,CAAE,EAC9DK,EAAU,QAAQ/B,EAAc,CAAE,WAAY,EAAM,CAAA,CAC5D,EACI,IAAI8B,EAAW,IAAI,iBAAiBG,CAAY,EAC5CF,EAAY,IAAI,iBAAiBH,CAAiB,EACtD,OAAAE,EAAS,QAAQJ,EAAO,CAAE,cAAe,GAAM,QAAS,EAAI,CAAE,EAC9DK,EAAU,QAAQ/B,EAAc,CAAE,WAAY,EAAM,CAAA,EAC7C,EACX,EAGaW,EAAe,SAAUX,EAAcI,EAAY,CAC5D,IAAIsB,EAAQtB,EAAW,cAAc,uBAAuB,EACxD8B,EAAMlC,EAAa,aAAa,UAAU,EAAIA,EAAa,aAAa,UAAU,EAAI,EACtFmC,EAAMnC,EAAa,aAAa,UAAU,EAAIA,EAAa,aAAa,UAAU,EAAIoC,EAAgBV,CAAK,EAC3GW,EAAOrC,EAAa,aAAa,WAAW,EAAIA,EAAa,aAAa,WAAW,EAAI,SACzFsC,EAAQtC,EAAa,aAAa,YAAY,EAAIA,EAAa,aAAa,YAAY,EAAE,MAAM,GAAG,EAAI,CAAA,EACvGuC,EAAavC,EAAa,aAAa,iBAAiB,EAAIA,EAAa,aAAa,iBAAiB,EAAE,MAAM,GAAG,EAAI,CAAA,EACtHwC,EAAUxC,EAAa,aAAa,cAAc,EAAI,KAAK,MAAMA,EAAa,aAAa,cAAc,CAAC,EAAI,KAC9GyC,EAASzC,EAAa,aAAa,aAAa,EAAI,KAAK,MAAMA,EAAa,aAAa,aAAa,CAAC,EAAI,KAC3GU,EAAQV,EAAa,aAAa,YAAY,EAAIA,EAAa,aAAa,YAAY,EAAE,MAAM,GAAG,EAAI,KACvG0C,EAAY1C,EAAa,aAAa,gBAAgB,EAAIA,EAAa,aAAa,gBAAgB,EAAI,KACxG2C,EAAQ3C,EAAa,aAAa,YAAY,EAAIA,EAAa,aAAa,YAAY,EAAI,EAC5F4C,EAAM5C,EAAa,aAAa,UAAU,EAAIA,EAAa,aAAa,UAAU,EAAIoC,EAAgBV,CAAK,EAC3GmB,EAAQ7C,EAAa,aAAa,YAAY,EAAIA,EAAa,aAAa,YAAY,EAAI,KAC5F8C,EAAO9C,EAAa,aAAa,WAAW,EAAIA,EAAa,aAAa,WAAW,EAAI,KAC7F,MAAO,CAAE,IAAAkC,EAAK,IAAAC,EAAK,KAAAE,EAAM,MAAAC,EAAO,QAAAE,EAAS,OAAAC,EAAQ,MAAA/B,EAAO,UAAAgC,EAAW,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,KAAAC,EAAM,WAAAP,CAAU,CAC1G,EACA,SAASH,EAAgBV,EAAO,CAC5B,IAAIqB,EAAS,MAAM,KAAKrB,EAAM,iBAAiB,4BAA4B,CAAC,EAAE,IAAKjB,GAAY,CAC3F,IAAIuC,EAAe,OAAOvC,EAAQ,WAAW,EAC7C,OAAAuC,EAAeA,EAAa,QAAQ,OAAK,EAAE,EAC3CA,EAAeA,EAAa,QAAQ,IAAK,EAAE,EAC3CA,EAAeA,EAAa,QAAQ,IAAK,EAAE,EAC3CA,EAAe,OAAO,WAAWA,CAAY,EACtCA,CACf,CAAK,EACGC,EAAc,KAAK,IAAI,GAAGF,CAAM,EAEpC,OAAO,KAAK,KAAKE,CAAW,CAChC,CACA,MAAMC,EAAY,SAAUC,EAAOjB,EAAKC,EAAKQ,EAAO,CAChD,IAAIS,EAAa,OAAOD,CAAK,EAC7BC,EAAaA,EAAW,QAAQ,OAAK,EAAE,EACvCA,EAAaA,EAAW,QAAQ,IAAK,EAAE,EACvCA,EAAaA,EAAW,QAAQ,IAAK,EAAE,EACvCA,EAAa,OAAO,WAAWA,CAAU,EACzC,IAAIC,GAAYD,EAAalB,IAAQC,EAAMD,GAAQ,IAC/CoB,EAAOD,EACPE,EAAS,EACb,OAAIZ,GAASA,GAAS,IAClBY,GAAWZ,EAAQT,IAAQC,EAAMD,GAAQ,KAGzCA,EAAM,IACNqB,EAAS,KAAK,IAAMrB,GAAQC,EAAMD,GAAQ,GAAG,EACzCkB,EAAa,GACbC,EAAUE,EAASF,EACnBE,EAASA,EAASF,EAClBC,EAAOC,IAGPF,EAAUA,EAAUE,EACpBD,EAAOD,EAAUE,IAGlB,CAAE,QAAAF,EAAS,KAAAC,EAAM,OAAAC,EAC5B,EAGa3C,EAAc,SAAUZ,EAAcI,EAAYsB,EAAO,CAClE,GAAI,CAAE,IAAAQ,EAAK,IAAAC,CAAG,EAAKxB,EAAaX,EAAcI,CAAU,EACpDsC,EAAY1C,EAAa,aAAa,gBAAgB,EACtDwD,EAAWtB,EACf,MAAM,KAAKR,EAAM,iBAAiB,UAAU,CAAC,EAAE,QAAQ,CAAC+B,EAAIC,IAAU,CAClE,IAAIC,EAAQF,EAAG,cAAc,gCAAgC,EAAIA,EAAG,cAAc,gCAAgC,EAAE,YAAc,GAClIA,EAAG,aAAa,OAAQ,OAAO,EAE/B,MAAM,KAAKA,EAAG,iBAAiB,0CAA0C,CAAC,EAAE,QAASG,GAAO,CACxF,IAAIT,EAAQ,WAAWS,EAAG,YAAY,QAAQ,OAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,CAAC,EACpFjB,EAAQ,EACZ,GAAID,GAAa,OAAQ,CACrB,IAAImB,EAAQD,EAAG,YAAY,MAAM,KAAK,EAClCC,EAAM,CAAC,IACPV,EAAQ3D,EAAaqE,EAAM,CAAC,EAAGA,EAAM,CAAC,CAAC,EACvClB,EAAQnD,EAAagE,EAAUK,EAAM,CAAC,CAAC,EAAI,GAGnDD,EAAG,aAAa,eAAgBT,CAAK,EACrCS,EAAG,aAAa,aAAcA,EAAG,WAAW,EAC5CA,EAAG,aAAa,aAAcjB,CAAK,CAC/C,CAAS,EAED,MAAM,KAAKc,EAAG,iBAAiB,sBAAsB,CAAC,EAAE,QAAQ,CAACG,EAAIF,IAAU,CACvEA,GAAS,EACTE,EAAG,aAAa,OAAQ,aAAa,EAErCA,EAAG,aAAa,OAAQ,OAAO,EAC/BH,EAAG,iBAAiB,IAAI,EAAE,OAAS,GACnCG,EAAG,aAAa,aAAclC,EAAM,iBAAiB,UAAU,EAAEgC,CAAK,EAAE,WAAW,CACnG,CAAS,EAcD,IAAII,EAASL,EAAG,aAAa,UAAU,EAAIA,EAAG,aAAa,UAAU,EAAIvB,EACrE6B,EAASN,EAAG,aAAa,UAAU,EAAIA,EAAG,aAAa,UAAU,EAAItB,EACzE,GAAI2B,EAAS,EAAG,CACZ,IAAIE,EAAY,KAAK,IAAMF,GAAWC,EAASD,GAAW,GAAG,EAC7D9D,EAAa,aAAa,QAAS,iBAAiBgE,KAAa,EAGrEP,EAAG,MAAM,YAAY,cAAeC,EAAQ,CAAC,EAE7C,MAAM,KAAKD,EAAG,iBAAiB,oFAAoF,CAAC,EAAE,QAASG,GAAO,CAElI,GADc,iBAAiBA,CAAE,EAAE,SACpB,OACX,OACJ,MAAMK,EAAUL,EAAG,UACbT,EAAQ,OAAO,WAAWS,EAAG,aAAa,cAAc,CAAC,EACzDjB,EAAQ,OAAO,WAAWiB,EAAG,aAAa,YAAY,CAAC,EAG7D,GAFKA,EAAG,cAAc,kBAAkB,IACpCA,EAAG,UAAY,qBAAqBD,MAAUC,EAAG,aAAa,YAAY,EAAI,eAAeA,EAAG,aAAa,YAAY,KAAO,qBAAqBK,YACrJ,CAACL,EAAG,aAAa,OAAO,EAAG,CAC3B,GAAI,CAAE,QAAAP,EAAS,OAAAE,EAAQ,KAAAD,CAAM,EAAGJ,EAAUC,EAAOW,EAAQC,EAAQpB,CAAK,EACtEiB,EAAG,aAAa,eAAgBP,CAAO,EACvCO,EAAG,aAAa,QAAS,YAAYL,gBAAqBF,aAAmBC,KAAQ,EAErG,CAAS,CACT,CAAK,CACL,EACaY,EAAkB,SAAU9D,EAAY,CACjD,IAAI+D,EAAe/D,EAAW,cAAc,iBAAiB,EACzDgE,EAAchE,EAAW,cAAc,qBAAqB,EAC5DsB,EAAQtB,EAAW,cAAc,cAAc,EAE/CiE,EAAe,GACnB,MAAM,KAAK3C,EAAM,iBAAiB,yBAAyB,CAAC,EAAE,QAASkC,GAAO,CACtE,OAAOA,EAAG,YAAe,KAAeA,EAAG,YAAY,OAASS,EAAa,SAC7EA,EAAeT,EAAG,YAE9B,CAAK,EACDO,EAAa,aAAa,qBAAsBE,CAAY,EAC5DD,EAAY,UAAYC,CAC5B,EACaC,EAAkB,SAAUlE,EAAY,CACjD,IAAI+D,EAAe/D,EAAW,cAAc,iBAAiB,EACzDsB,EAAQtB,EAAW,cAAc,cAAc,EAC/CmE,EAAe,GACnB,MAAM,KAAK7C,EAAM,iBAAiB,oCAAoC,CAAC,EAAE,QAASkC,GAAO,CACjF,OAAOA,EAAG,YAAe,KAAeA,EAAG,YAAY,OAASW,EAAa,SAC7EA,EAAeX,EAAG,YAC9B,CAAK,EACDO,EAAa,aAAa,qBAAsBI,CAAY,CAChE,EAGa1D,EAAiB,SAAUT,EAAYC,EAAcC,EAAU,CACxE,MAAMkE,EAAU,SAAS,KAAK,IAAK,GAAI,KAAK,MAAM,KAAK,OAAM,EAAK,GAAG,EAAI,KAEzE,IAAIC,EACAC,EAAW,MAAM,KAAKrE,EAAa,iBAAiB,UAAU,CAAC,EACnE,OAAAqE,EAAS,QAAQ,CAACC,EAAcjB,IAAU,CAClCA,GAAS,IACTe,EAAgBG,EAAmBJ,EAASd,EAAOiB,EAAa,YAAarE,EAAUF,EAAYqE,CAAa,GAEhHf,GAAS,KACTgB,EAAS,OAAShB,EAAQ,EAEtC,CAAK,EACM,EACX,EACA,SAASkB,EAAmBJ,EAASd,EAAOmB,EAAMvE,EAAUF,EAAYqE,EAAe,CACnF,IAAIK,EAAQ,SAAS,cAAc,OAAO,EAC1CA,EAAM,aAAa,OAAQ,GAAGN,aAAmBd,GAAO,EACxDoB,EAAM,aAAa,KAAM,GAAGN,aAAmBd,GAAO,EACtDoB,EAAM,QAAU,GAChBA,EAAM,aAAa,OAAQ,UAAU,EACjCpB,GAAS,EACTtD,EAAW,QAAQ0E,CAAK,EAExB1E,EAAW,aAAa0E,EAAOL,EAAc,WAAW,EAC5DA,EAAgBK,EAChB,IAAItD,EAAQ,SAAS,cAAc,OAAO,EAC1C,OAAAA,EAAM,aAAa,QAAS,oBAAoB,EAChDA,EAAM,aAAa,MAAO,GAAGgD,aAAmBd,GAAO,EACvDlC,EAAM,aAAa,aAAc,GAAGqD,GAAM,EAC1CrD,EAAM,aAAa,OAAQ,KAAK,EAChCA,EAAM,UAAY,GAAGqD,IACrBvE,EAAS,OAAOkB,CAAK,EACdiD,CACX,CACO,MAAM3D,EAAwB,SAAUd,EAAcI,EAAYG,EAAiB,CACtF,GAAI,CAAE,IAAA2B,EAAK,IAAAC,EAAK,MAAAG,EAAO,UAAAI,EAAW,WAAAH,CAAU,EAAK5B,EAAaX,EAAcI,CAAU,EACjFmC,EAAW,SACZA,EAAaD,GACbI,GAAa,SACbP,EAAM3C,EAAa0C,EAAKC,CAAG,EAC3BD,EAAM,GAEV3B,EAAgB,UAAY,GAC5B,QAASN,EAAI,EAAGA,EAAIsC,EAAW,OAAQtC,IAAK,CACxC,IAAIkD,EAAQ,WAAWZ,EAAWtC,CAAC,EAAE,QAAQ,OAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,CAAC,EACnF,CAAE,KAAAqD,CAAI,EAAKJ,EAAUC,EAAOjB,EAAKC,CAAG,EACxC5B,EAAgB,WAAa,2CAA2C+C,QAAWhB,EAAM,QAAQC,EAAWtC,CAAC,CAAC,GAAK,GAAK,SAASsC,EAAWtC,CAAC,WAAa,WAElK,EACac,EAAmB,SAAUf,EAAcI,EAAYI,EAAY,CAC5E,GAAI,CAAE,IAAA0B,EAAK,IAAAC,EAAK,MAAAG,EAAO,UAAAI,CAAS,EAAK/B,EAAaX,EAAcI,CAAU,EACtEoD,EAAWtB,EACXQ,GAAa,SACbP,EAAM3C,EAAa0C,EAAKC,CAAG,EAC3BD,EAAM,GAEV1B,EAAW,UAAY,GACvB,QAASP,EAAI,EAAGA,EAAIqC,EAAM,OAAQrC,IAAK,CACnC,IAAIkD,EAAQ,WAAWb,EAAMrC,CAAC,EAAE,QAAQ,OAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,CAAC,EAC7DyC,GAAa,SACbS,EAAQ3D,EAAagE,EAAUlB,EAAMrC,CAAC,CAAC,GAE3C,GAAI,CAAE,KAAAqD,CAAI,EAAKJ,EAAUC,EAAOjB,EAAKC,CAAG,EACxC3B,EAAW,WAAa,6CAA6C8C,cAAiBhB,EAAMrC,CAAC,iBAErG,EACae,EAAc,SAAUhB,EAAcI,EAAYM,EAAO,CAClE,MAAMQ,EAAQd,EAAW,cAAc,QAAQ,EAC/C,IAAI2E,EAAa3E,EAAW,cAAc,eAAe,EACrD,CAAE,UAAAsC,EAAW,MAAAC,EAAO,IAAAC,CAAK,EAAGjC,EAAaX,EAAcI,CAAU,EAKrE,GAJK2E,IACDA,EAAa,SAAS,cAAc,KAAK,EACzCA,EAAW,aAAa,QAAS,cAAc,GAE/CrC,GAAaC,GAASC,EAAK,CAC3BmC,EAAW,UAAY,GACvB,QAAS9E,EAAI,EAAGA,EAAIS,EAAM,OAAQT,IAAK,CAEnC,IAAI+E,GADQ,WAAWtE,EAAMT,CAAC,EAAE,QAAQ,OAAK,EAAE,EAAE,QAAQ,IAAK,EAAE,CAAC,EACxC0C,IAAUC,EAAMD,GAAU,IACnDoC,EAAW,WAAa,6CAA6CC,cAAqBtE,EAAMT,CAAC,kBAGzGiB,EAAM,QAAQ6D,CAAU,CAC5B,EACaE,EAAiB,SAAU7E,EAAY,CAChD,MAAM8E,EAAS9E,EAAW,iBAAiB,2EAA2E,EACtH,MAAM,KAAK8E,CAAM,EAAE,QAASC,GAAU,CAClC,IAAIC,EAAY,WAAW,KAAK,IAAK,KAAI,KAAK,MAAM,KAAK,OAAQ,EAAG,GAAG,IACvED,EAAM,UAAY,0CAA0CC,2CAAmDA,OAAeD,EAAM,iCAAiCC,gCAAwCA,gEAAwED,EAAM,aAAa,OAAO,UAEvT,CAAK,CACL,ECvVA,MAAME,UAAoB,WAAY,CAClC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EACZ,SAAS,KAAK,aAAa,sBAAsB,GAAI,SAAS,KAAK,aAAa,sBAAsB,EAE5H,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAgBrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,MAAMC,EAAiB,KAGjBC,EADe,KAAK,cAAc,OAAO,EACd,UAAU,EAAI,EACzCtE,EAAQ,KAAK,WAAW,cAAc,QAAQ,EAC9Cd,EAAa,KAAK,WAAW,cAAc,eAAe,EAChEc,EAAM,YAAYsE,CAAW,EAC7BzF,EAAWwF,CAAc,EACRrE,EAAM,iBAAiB,sBAAsB,EAAE,OACjD,KACXqE,EAAe,UAAU,IAAI,oBAAoB,EACjDA,EAAe,UAAU,IAAI,qBAAqB,GAEtDpF,EAAWoF,EAAgBnF,EAAYoF,CAAW,EAClD/D,EAAkB8D,EAAgBnF,CAAU,EAC5Ca,EAAiBb,CAAU,EAC3B8D,EAAgB9D,CAAU,EAC1BkE,EAAgBlE,CAAU,EAC1B6E,EAAe7E,CAAU,CAC5B,CACD,yBAAyBqF,EAAUC,EAAQC,EAAQ,CAClD,CACL"}
1
+ {"version":3,"file":"barchart.component.min.js","sources":["../../modules/chart.module.js","../_global.js","barchart.component.js"],"sourcesContent":["// #region Functions that setup and trigger other functions \nexport const addClasses = (chartElement, chartOuter) => {\n // add colour classes\n for (let i = 1; i <= 10; i++) {\n if (chartElement.hasAttribute(`data-colour-${i}`)) {\n let colour = chartElement.getAttribute(`data-colour-${i}`);\n chartElement.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);\n chartElement.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);\n }\n Array.from(chartOuter.querySelectorAll(`[data-colour-${i}]`)).forEach((element) => {\n let colour = element.getAttribute(`data-colour-${i}`);\n element.style.setProperty(`--chart-colour-${i}-set`, `var(--chart-colour-${colour})`);\n element.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);\n });\n }\n return true;\n};\nexport const setupChart = (chartElement, chartOuter, tableElement) => {\n // #region Reset the chart\n // empty divs to re-populate\n const chartKey = chartOuter.querySelector('.chart__key');\n chartKey.innerHTML = '';\n const chartGuidelines = chartOuter.querySelector('.chart__guidelines');\n chartGuidelines.innerHTML = ``;\n const chartYaxis = chartOuter.querySelector('.chart__yaxis');\n chartYaxis.innerHTML = ``;\n // Remove old input fields\n Array.from(chartOuter.querySelectorAll(':scope > input[type=\"checkbox\"],:scope > input[type=\"radio\"]')).map((element) => { element.remove(); });\n // #endregion\n let { xaxis } = getChartData(chartElement);\n setCellData(chartElement, tableElement);\n createChartKey(chartOuter, tableElement, chartKey);\n createChartGuidelines(chartElement, chartGuidelines);\n createChartYaxis(chartElement, chartYaxis);\n if (xaxis) {\n createXaxis(chartOuter);\n }\n return true;\n};\n// #endregion\n// #region Event handlers and observers\nexport const setEventListener = function (chartElement, chartOuter) {\n let chart = chartOuter.querySelector('.chart');\n chart.addEventListener('mousemove', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('td:not(:first-child')) {\n let column = event.target.closest('td:not(:first-child');\n var rect = column.getBoundingClientRect();\n let x = event.clientX - rect.left;\n let y = event.clientY - rect.top;\n chart.setAttribute('style', `--cursor-x: ${x}px; --cursor-y: ${y}px;`);\n }\n });\n // Use the part for the chart items to pass through states to the pages CSS\n let labels = chartOuter.querySelectorAll('label');\n Array.from(labels).forEach((label) => {\n if (chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)\n label.setAttribute('part', 'key-checked');\n else\n label.setAttribute('part', 'key-unchecked');\n });\n let table = chartElement.querySelector('table');\n let shadowTable = chartOuter.querySelector('table');\n chartOuter.addEventListener('change', function (event) {\n let eventTarget = event.target;\n const customEvent = new CustomEvent(\"view-change\", { detail: {\n 'data-dataset': eventTarget.getAttribute('data-dataset'),\n 'label': eventTarget.getAttribute('data-label'),\n 'checked': eventTarget.checked\n }\n });\n chartElement.dispatchEvent(customEvent);\n Array.from(labels).forEach((label) => {\n var _a;\n if ((_a = chartOuter.querySelector(`input#${label.getAttribute('for')}`)) === null || _a === void 0 ? void 0 : _a.checked)\n label.setAttribute('part', 'key-checked');\n else\n label.setAttribute('part', 'key-unchecked');\n });\n shadowTable.innerHTML = table.innerHTML;\n setCellData(chartElement, shadowTable);\n });\n};\nexport const setEventObservers = function (chartElement, chartOuter) {\n let table = chartElement.querySelector('table');\n let shadowTable = chartOuter.querySelector('table');\n const attributesUpdated = (mutationList, observer) => {\n observer.disconnect();\n observer2.disconnect();\n for (const mutation of mutationList) {\n if (mutation.attributeName == 'class' || (mutation.type === 'attributes') || mutation.type === 'attributes') {\n shadowTable.innerHTML = table.innerHTML;\n setupChart(chartElement, chartOuter, shadowTable);\n }\n }\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n };\n const tableUpdated = (mutationList, observer) => {\n observer.disconnect();\n observer2.disconnect();\n for (const mutation of mutationList) {\n if (mutation.type == \"characterData\" || (mutation.type == \"childList\" && mutation.addedNodes.length)) {\n shadowTable.innerHTML = table.innerHTML;\n setupChart(chartElement, chartOuter, shadowTable);\n }\n }\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n };\n let observer = new MutationObserver(tableUpdated);\n let observer2 = new MutationObserver(attributesUpdated);\n observer.observe(table, { characterData: true, subtree: true });\n observer2.observe(chartElement, { attributes: true });\n return true;\n};\n// #endregion\n// #region GET functions\nexport const getChartData = function (chartElement) {\n let table = chartElement.shadowRoot.querySelector('.chart__wrapper table');\n let min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;\n let max = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(chartElement, table);\n //let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';\n let yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];\n let guidelines = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];\n //let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;\n //let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;\n let xaxis = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;\n //let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;\n //let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;\n //let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis\n //let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;\n //let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;\n return { min, max, yaxis, xaxis, guidelines };\n};\nfunction getLargestValue(chartElement, table) {\n const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';\n let values = Array.from(table.querySelectorAll(selector)).map((element) => {\n let currentValue = element.getAttribute('data-numeric');\n return currentValue;\n });\n let largestValue = Math.max(...values);\n // TO DO round to the nearest 10, 100, 1000 and so on\n return Math.ceil(largestValue);\n}\nconst getValues = function (value, min, max, start) {\n let cleanValue = String(value);\n cleanValue = cleanValue.replace('£', '');\n cleanValue = cleanValue.replace('%', '');\n cleanValue = cleanValue.replace(',', '');\n cleanValue = Number.parseFloat(cleanValue);\n let percent = ((cleanValue - min) / (max - min)) * 100;\n let axis = percent;\n let bottom = 0;\n if (start && start != 0) {\n bottom = ((start - min) / (max - min)) * 100;\n }\n // If the value is negative the position below the 0 line\n if (min < 0) {\n bottom = Math.abs(((min) / (max - min)) * 100);\n if (cleanValue < 0) {\n percent = bottom - percent;\n bottom = bottom - percent;\n axis = bottom;\n }\n else {\n percent = percent - bottom;\n axis = percent + bottom;\n }\n }\n return { percent, axis, bottom };\n};\n// #endregion\n// #region SET functions - set data attributes and classes\nexport const setCellData = function (chartElement, table) {\n Array.from(table.querySelectorAll('tbody tr')).forEach((tr) => {\n let rowValue = 0;\n // Set the data numeric value if not set\n Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td) => {\n let value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));\n td.setAttribute('data-numeric', value);\n td.setAttribute('data-value', td.textContent);\n let display = getComputedStyle(td).display;\n if (display != 'none')\n rowValue += value;\n });\n tr.setAttribute('data-numeric', rowValue);\n });\n let { min, max } = getChartData(chartElement);\n Array.from(table.querySelectorAll('tbody tr')).forEach((tr, index) => {\n let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').textContent : '';\n tr.setAttribute('part', 'group');\n let percent = ((tr.getAttribute('data-numeric') - min) / (max - min)) * 100;\n tr.style.setProperty('--percent', `${percent}%`);\n // Set the data label value if not set\n Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td, index) => {\n if (index == 0)\n td.setAttribute('part', 'xaxis-label'); // PART\n else\n td.setAttribute('part', 'value');\n if (tr.querySelectorAll('td').length > 2)\n td.setAttribute('data-label', table.querySelectorAll('thead th')[index].textContent);\n });\n let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;\n let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;\n if (rowMin < 0) {\n let minBottom = Math.abs(((rowMin) / (rowMax - rowMin)) * 100);\n chartElement.setAttribute('style', `--min-bottom: ${minBottom}%;`);\n }\n // Add a useful index css var for the use of animatons.\n tr.style.setProperty('--row-index', index + 1);\n // Add css vars to cells\n Array.from(tr.querySelectorAll('td[data-numeric]:not([data-label=\"Min\"]):not([data-label=\"Max\"]):not(:first-child)')).forEach((td) => {\n let display = getComputedStyle(td).display;\n if (display == 'none')\n return;\n const content = td.innerHTML;\n const value = Number.parseFloat(td.getAttribute('data-numeric'));\n const start = Number.parseFloat(td.getAttribute('data-start'));\n if (!td.querySelector('span[data-group]'))\n td.innerHTML = `<span data-group=\"${group}\" ${td.hasAttribute('data-label') ? `data-label=\"${td.getAttribute('data-label')}\"` : ''} part=\"popover\">${content}</span>`;\n if (!td.hasAttribute('style')) {\n let { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);\n td.setAttribute('data-percent', percent);\n td.setAttribute(\"style\", `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);\n }\n });\n });\n};\nexport const setLongestLabel = function (chartOuter) {\n let chartWrapper = chartOuter.querySelector('.chart__wrapper');\n let chartSpacer = chartOuter.querySelector('.chart__spacer span');\n let table = chartOuter.querySelector('.chart table');\n // set the longest label attr so that the bar chart knows what margin to set on the left\n let longestLabel = '';\n Array.from(table.querySelectorAll('tbody tr td:first-child')).forEach((td) => {\n if (typeof td.textContent != \"undefined\" && td.textContent.length > longestLabel.length) {\n longestLabel = td.textContent;\n }\n });\n chartWrapper.setAttribute('data-longest-label', longestLabel);\n chartSpacer.innerHTML = longestLabel;\n};\nexport const setLongestValue = function (chartOuter) {\n let chartWrapper = chartOuter.querySelector('.chart__wrapper');\n let table = chartOuter.querySelector('.chart table');\n let longestValue = '';\n Array.from(table.querySelectorAll('tbody tr td:not(:first-child) span')).forEach((td) => {\n if (typeof td.textContent != \"undefined\" && td.textContent.length > longestValue.length)\n longestValue = td.textContent;\n });\n chartWrapper.setAttribute('data-longest-value', longestValue);\n};\n// #endregion\n// #region CREATE function\nexport const createChartKey = function (chartOuter, tableElement, chartKey) {\n const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;\n //const chartOuter = chartElement.querySelector('.chart__outer');\n let previousInput;\n let headings = Array.from(tableElement.querySelectorAll('thead th'));\n headings.forEach((arrayElement, index) => {\n if (index != 0) {\n previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);\n }\n if (index == 50) {\n headings.length = index + 1;\n }\n });\n return true;\n};\nfunction createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {\n let input = document.createElement('input');\n input.setAttribute('name', `${chartID}-dataset-${index}`);\n input.setAttribute('id', `${chartID}-dataset-${index}`);\n input.setAttribute('data-dataset', `${index}`);\n input.setAttribute('data-label', `${text}`);\n input.checked = true;\n input.setAttribute('type', `checkbox`);\n if (index == 1)\n chartOuter.prepend(input);\n else\n chartOuter.insertBefore(input, previousInput.nextSibling);\n previousInput = input;\n let label = document.createElement('label');\n label.setAttribute('class', `key btn btn-action`);\n label.setAttribute('for', `${chartID}-dataset-${index}`);\n label.setAttribute('data-label', `${text}`);\n label.setAttribute('part', `key`);\n label.innerHTML = `${text}`;\n chartKey.append(label);\n return previousInput;\n}\nexport const createChartGuidelines = function (chartElement, chartGuidelines) {\n let { min, max, yaxis, guidelines } = getChartData(chartElement);\n if (!guidelines.length)\n guidelines = yaxis;\n chartGuidelines.innerHTML = '';\n for (var i = 0; i < guidelines.length; i++) {\n let value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));\n let { axis } = getValues(value, min, max);\n chartGuidelines.innerHTML += `<div class=\"guideline\" style=\"--percent:${axis}%;\">${yaxis.indexOf(guidelines[i]) != -1 ? `<span>${guidelines[i]}</span>` : ''}</div>`;\n }\n};\nexport const createChartYaxis = function (chartElement, chartYaxis) {\n let { min, max, yaxis } = getChartData(chartElement);\n chartYaxis.innerHTML = '';\n for (var i = 0; i < yaxis.length; i++) {\n let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));\n let { axis } = getValues(value, min, max);\n chartYaxis.innerHTML += `<div class=\"axis__point\" style=\"--percent:${axis}%;\"><span>${yaxis[i]}</span></div>`;\n }\n};\nexport const createXaxis = function (chartOuter) {\n const chart = chartOuter.querySelector('.chart');\n let chartXaxis = chartOuter.querySelector('.chart__xaxis');\n if (!chartXaxis) {\n chartXaxis = document.createElement('div');\n chartXaxis.setAttribute('class', 'chart__xaxis');\n }\n chart.prepend(chartXaxis);\n};\nexport const createTooltips = function (chartOuter) {\n const titles = chartOuter.querySelectorAll('thead th[title], tbody th[title]:first-child, tbody td[title]:first-child');\n Array.from(titles).forEach((title) => {\n let tooltipId = `tooltip-${Date.now()}-${Math.floor(Math.random() * 100)}`;\n title.innerHTML = `<button class=\"tooltip\" popovertarget=\"${tooltipId}\" part=\"tooltip\" style=\"anchor-name: --${tooltipId};\">${title.textContent}</button><span id=\"${tooltipId}\" style=\"position-anchor: --${tooltipId};\" popover part=\"tooltip__content\" class=\"tooltip__content\">${title.getAttribute('title')}</span>`;\n //title.removeAttribute('title'); // TODO add a supports query for anchor positioning\n });\n};\n// #endregion\nexport default setupChart;\n","// @ts-nocheck\nexport 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 let 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","// @ts-nocheck\nimport { addClasses, setupChart, setEventListener, setEventObservers, setLongestLabel, setLongestValue, createTooltips } from \"../../modules/chart.module.js\";\nimport { trackComponent, trackComponentRegistered } from \"../_global.js\";\ntrackComponentRegistered(\"iam-barchart\");\nclass iamBarChart extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/barchart.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${loadCSS}\n </style>\n <div class=\"chart__outer\" part=\"outer\">\n <div class=\"chart__key\" part=\"chart-key\"></div>\n <div class=\"chart__wrapper\" part=\"wrapper\">\n <div class=\"chart__yaxis\" part=\"yaxis\"></div>\n <div class=\"chart\" part=\"chart\">\n <div class=\"chart__guidelines\" part=\"guidelines\"></div>\n </div>\n </div>\n <div class=\"chart__spacer\"><span part=\"spacer\"></span</div>\n </div>`;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const chartComponent = this;\n const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;\n const orginalTable = this.querySelector('table');\n const clonedTable = orginalTable.cloneNode(true);\n const chart = this.shadowRoot.querySelector('.chart');\n const chartOuter = this.shadowRoot.querySelector('.chart__outer');\n const barCount = chart.querySelectorAll('td:not(:first-child)').length;\n chart.appendChild(clonedTable);\n addClasses(chartComponent, chartOuter);\n if (barCount <= 10) {\n chartComponent.classList.add('chart--fit-content');\n }\n if (barCount <= 5) {\n chartComponent.classList.add('chart--no-scale');\n }\n setupChart(chartComponent, chartOuter, clonedTable);\n setEventObservers(chartComponent, chartOuter);\n setEventListener(chartComponent, chartOuter);\n setLongestLabel(chartOuter);\n setLongestValue(chartOuter);\n createTooltips(chartOuter);\n trackComponent(chartComponent, \"iam-barchart\", ['view-change']);\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n }\n}\nexport default iamBarChart;\n"],"names":["addClasses","chartElement","chartOuter","i","colour","element","setupChart","tableElement","chartKey","chartGuidelines","chartYaxis","xaxis","getChartData","setCellData","createChartKey","createChartGuidelines","createChartYaxis","createXaxis","setEventListener","chart","event","rect","x","y","labels","label","table","shadowTable","eventTarget","customEvent","_a","setEventObservers","attributesUpdated","mutationList","observer","observer2","mutation","tableUpdated","min","max","getLargestValue","yaxis","guidelines","selector","values","largestValue","getValues","value","start","cleanValue","percent","axis","bottom","tr","rowValue","td","index","group","rowMin","rowMax","minBottom","content","setLongestLabel","chartWrapper","chartSpacer","longestLabel","setLongestValue","longestValue","chartID","previousInput","headings","arrayElement","createChartKeyItem","text","input","chartXaxis","createTooltips","titles","title","tooltipId","trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","eventDetails","eventKey","eventDetail","iamBarChart","template","chartComponent","clonedTable","barCount","attrName","oldVal","newVal"],"mappings":"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"}
@@ -9,7 +9,7 @@ class iamCard extends HTMLElement {
9
9
  constructor() {
10
10
  super();
11
11
  this.attachShadow({ mode: 'open' });
12
- if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
12
+ if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
13
13
  this.classList.add('card--has-icon');
14
14
  let classList = this.classList.toString();
15
15
  const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
@@ -34,7 +34,8 @@ class iamCard extends HTMLElement {
34
34
  document.head.insertAdjacentHTML('beforeend', `<style id="cardGlobal">${loadExtraCSS}</style>`);
35
35
  }
36
36
  createCardConent() {
37
- return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
37
+ // TODO split this out a bit
38
+ return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head" part="head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
38
39
  <div class="card__body" part="body">
39
40
  ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
40
41
  ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
@@ -44,6 +45,13 @@ class iamCard extends HTMLElement {
44
45
  </div>
45
46
  ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
46
47
  <slot name="checkbox"></slot>
48
+ <slot name="primary-action"></slot>
49
+ <div class="dialog__wrapper d-none">
50
+ <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="${this.hasAttribute('data-menu-title') ? this.getAttribute('data-menu-title') : 'Further actions'}">Lorum ipsum</button>
51
+ <dialog class="dialog--fix dialog--list" id="actions" popover>
52
+ <slot name="actions"></slot>
53
+ </dialog>
54
+ </div>
47
55
  <div class="card__footer" part="footer">
48
56
  <slot name="footer"></slot>
49
57
  <slot name="btns"></slot>
@@ -53,10 +61,27 @@ class iamCard extends HTMLElement {
53
61
  connectedCallback() {
54
62
  this.classList.add('loaded');
55
63
  // Mimic clicking the parent node so the focus and target events can be on the card
56
- const parentNode = this.parentNode.closest('a, button, label, router-link');
64
+ const component = this;
65
+ const parentNode = component.parentNode.closest('a, button, label, router-link');
57
66
  const card = this.shadowRoot.querySelector('.card');
58
67
  const btnCompact = this.shadowRoot.querySelector('.btn-compact');
59
68
  const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
69
+ // Add the actions slot to the buttons and links to move them into a dialog warpper
70
+ const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
71
+ let buttons = component.querySelectorAll('button[slot="actions"],a[slot="actions"]');
72
+ if (buttons.length) {
73
+ const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
74
+ const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');
75
+ const actionsBtn = actionsWrapper.querySelector('button');
76
+ actionsWrapper.classList.remove('d-none');
77
+ Array.from(buttons).forEach((button, index) => {
78
+ button.classList.add('btn');
79
+ button.classList.add('btn-action');
80
+ });
81
+ }
82
+ else {
83
+ actionsWrapper.remove();
84
+ }
60
85
  /*
61
86
  If the parentNode is actually just a div,
62
87
  we don't want to look for anything or add events
@@ -154,7 +179,7 @@ class iamCard extends HTMLElement {
154
179
  case "class": {
155
180
  if (oldVal != newVal) {
156
181
  let classList = this.classList.toString();
157
- if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
182
+ if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
158
183
  classList += ' card--has-icon';
159
184
  this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);
160
185
  this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
@@ -1,19 +1,19 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
- */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&this.classList.add("card--has-icon");let e=this.classList.toString();const r=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${r}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
4
+ */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class g extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)')&&this.classList.add("card--has-icon");let i=this.classList.toString();const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
5
5
  <style>
6
- @import "${o}";
7
- .card{--card-icon-right: 1rem;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);min-height:100%;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}.card>*:not(.btn-compact){min-width:100%}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);z-index:-1}.card__footer{margin-top:auto;padding:0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding)}.card:is(:hover,:focus) .link:after{width:50%}.card:has(.card__footer .link):before,.card:has(.card__footer .link):after{display:none}.card:before,.card: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%}.card: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}.card: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}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):before{background:var(--hover-icon-bg, var(--colour-primary-theme))}.card:not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):after{background:var(--hover-icon-colour, #ffffff)}.card:is(:active,.active){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}.card:is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.card .card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card.card--has-icon:not(.card--secondary):not(.card--filter){display:flex;align-items:center}.card.card--has-icon:not(.card--secondary):not(.card--filter):before,.card.card--has-icon:not(.card--secondary):not(.card--filter):after{top:calc(50% - .75rem);bottom:auto}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__body{padding-left:4rem;margin-block:auto;padding-bottom:var(--card-bottom-padding)}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer{padding:0;display:none}::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(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}.card__head .card__badges{position:absolute;top:1rem;text-align:left;left:1rem;z-index:9}.card__body .card__badges.card__badges--inline{margin-top:-1rem;min-height:1rem}.card__body .card__badges:not(.card__badges--inline){position:absolute;top:.5rem;text-align:left;right:.75rem;z-index:9}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) :is(.card__body,.card__footer){background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter:is(:checked,.checked,:active,.active) .card__footer{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{margin-top:0;order:-1}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:var(--img-height, 27%);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}:host(.card--flag){position:relative}:host(.card--flag):after{content:"\uF024";font-family:"Font Awesome 6 Pro";position:absolute;top:1rem;right:1rem;font-size:1rem;line-height:1;height:1rem;width:1rem;display:inline-block;font-weight:normal;color:var(--colour, var(--colour-primary))}.card--secondary{--card-top-padding: 1rem;--card-bottom-padding: 1.5rem}.card--secondary:before,.card--secondary:after{display:none}.card--secondary .btn-compact{position:absolute;top:0;right:0;margin:.5rem .5rem 0 0;z-index:99}.card--secondary.secondary-hover{outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--secondary.secondary-hover .btn-compact{background-color:var(--colour);color:var(--colour-primary-theme);border-color:rgba(0,0,0,0) !important}.card--secondary:has(.btn-compact:is(:hover,:focus,:active)) .btn-compact{pointer-events:all}.card--secondary ::slotted(i){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card--record:has(.card__head){--img-height: 40%}.card--record:has(.card__head):before,.card--record:has(.card__head):after{display:none}.card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record=business]){--record-icon: "\uF54F";--record-colour: var(--wider-colour-2)}:host([data-record=page]){--record-icon: "\uF15C";--record-colour: var(--wider-colour-3)}:host([data-record=contact]){--record-icon: "\uF2B9";--record-colour: var(--wider-colour-4)}:host([data-record=lettings]){--record-icon: "\uE003";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-5)}:host([data-record=sales]){--record-icon: "\uE004";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-7)}:host([data-record=landlord]){--record-icon: "\uE001";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-8)}:host([data-record=contractor]){--record-icon: "\uF82C";--record-colour: var(--wider-colour-9)}:host([data-record=vendor]){--record-icon: "\uE002";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-13)}:host([data-record=tenant]){--record-icon: "\uE1B0";--record-colour: var(--wider-colour-6)}:host([data-record=sales-applicant]){--record-icon: "\uE006";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-10)}:host([data-record]) .card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record]) .card--record:has(.card__head) .card__head:before{font-family:var(--record-icon-font, "Font Awesome 6 Pro");font-weight:normal;font-size:1.5rem;content:var(--record-icon);display:block;position:absolute;top:auto;left:50%;bottom:0;background-color:var(--record-colour);border-radius:50%;height:4rem;line-height:4rem;width:4rem;text-align:center;transform:translate(-50%, 0)}slot[name=btns]{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;margin-right:calc(var(--card-right-padding)*-1);margin-bottom:calc(var(--card-bottom-padding)*-1);padding-right:1rem;padding-bottom:1rem;pointer-events:none}::slotted([slot=btns]){pointer-events:all;margin:0 !important}/*# sourceMappingURL=assets/css/components/card.css.map */
6
+ @import "${r}";
7
+ .card{--card-icon-right: 1rem;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);min-height:100%;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}.card>*:not(.btn-compact){min-width:100%}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);z-index:-1}.card__footer{margin-top:auto;padding:0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding)}.card:is(:hover,:focus) .link:after{width:50%}.card:has(.card__footer .link):before,.card:has(.card__footer .link):after{display:none}.card:not(:has(.dialog__wrapper)):before,.card:not(:has(.dialog__wrapper)):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%}.card:not(:has(.dialog__wrapper)):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}.card:not(:has(.dialog__wrapper)):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}.card:not(:has(.dialog__wrapper)):not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):before{background:var(--hover-icon-bg, var(--colour-primary-theme))}.card:not(:has(.dialog__wrapper)):not([class*=colour-]):is(:hover,:focus,.hover,:active,.active):after{background:var(--hover-icon-colour, #ffffff)}.card:not(:has(.dialog__wrapper)):is(:active,.active){--card-icon-right: var(--card-icon-right-overide,0.5rem);outline:none}.card:not(:has(.dialog__wrapper)):is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.card .card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card.card--has-icon:not(.card--secondary):not(.card--filter){display:flex;align-items:center}.card.card--has-icon:not(.card--secondary):not(.card--filter):before,.card.card--has-icon:not(.card--secondary):not(.card--filter):after{top:calc(50% - .75rem);bottom:auto}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__body{padding-left:4rem;margin-block:auto;padding-bottom:var(--card-bottom-padding)}.card.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer{padding:0;display:none}::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(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}.card__head .card__badges{position:absolute;top:1rem;text-align:left;left:1rem;z-index:9}.card__body .card__badges.card__badges--inline{margin-top:-1rem;min-height:1rem}.card__body .card__badges:not(.card__badges--inline){position:absolute;top:.5rem;text-align:left;right:.75rem;z-index:9}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) :is(.card__body,.card__footer){background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter:is(:checked,.checked,:active,.active) .card__footer{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{margin-top:0;order:-1}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:var(--img-height, 27%);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}:host(.card--flag){position:relative}:host(.card--flag):after{content:"\uF024";font-family:"Font Awesome 6 Pro";position:absolute;top:1rem;right:1rem;font-size:1rem;line-height:1;height:1rem;width:1rem;display:inline-block;font-weight:normal;color:var(--colour, var(--colour-primary))}.card--secondary{--card-top-padding: 1rem;--card-bottom-padding: 1.5rem}.card--secondary:before,.card--secondary:after{display:none}.card--secondary .btn-compact{position:absolute;top:0;right:0;margin:.5rem .5rem 0 0;z-index:99}.card--secondary.secondary-hover{outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--secondary.secondary-hover .btn-compact{background-color:var(--colour);color:var(--colour-primary-theme);border-color:rgba(0,0,0,0) !important}.card--secondary:has(.btn-compact:is(:hover,:focus,:active)) .btn-compact{pointer-events:all}.card--secondary ::slotted(i){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card--record:has(.card__head){--img-height: 40%}.card--record:has(.card__head):before,.card--record:has(.card__head):after{display:none}.card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record=business]){--record-icon: "\uF54F";--record-colour: var(--wider-colour-2)}:host([data-record=page]){--record-icon: "\uF15C";--record-colour: var(--wider-colour-3)}:host([data-record=contact]){--record-icon: "\uF2B9";--record-colour: var(--wider-colour-4)}:host([data-record=lettings]){--record-icon: "\uE003";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-5)}:host([data-record=sales]){--record-icon: "\uE004";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-7)}:host([data-record=landlord]){--record-icon: "\uE001";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-8)}:host([data-record=contractor]){--record-icon: "\uF82C";--record-colour: var(--wider-colour-9)}:host([data-record=vendor]){--record-icon: "\uE002";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-13)}:host([data-record=tenant]){--record-icon: "\uE1B0";--record-colour: var(--wider-colour-6)}:host([data-record=sales-applicant]){--record-icon: "\uE006";--record-icon-font: Font Awesome Kit;--record-colour: var(--wider-colour-10)}:host([data-record]) .card--record:has(.card__head) .card__head{background:rgba(0,0,0,0);position:relative}:host([data-record]) .card--record:has(.card__head) .card__head:before{font-family:var(--record-icon-font, "Font Awesome 6 Pro");font-weight:normal;font-size:1.5rem;content:var(--record-icon);display:block;position:absolute;top:auto;left:50%;bottom:0;background-color:var(--record-colour);border-radius:50%;height:4rem;line-height:4rem;width:4rem;text-align:center;transform:translate(-50%, 0)}slot[name=btns]{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;margin-right:calc(var(--card-right-padding)*-1);margin-bottom:calc(var(--card-bottom-padding)*-1);padding-right:1rem;padding-bottom:1rem;pointer-events:none}::slotted([slot=btns]){pointer-events:all;margin:0 !important}.dialog__wrapper{position:absolute;right:1rem;bottom:2rem;min-width:3rem !important;left:auto;z-index:999}.dialog__wrapper>dialog{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>dialog::backdrop{display:none}.dialog__wrapper>dialog:popover-open{display:block !important}.dialog__wrapper:has(dialog:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>button{margin:0;anchor-name:--anchor-el}.dialog__wrapper>button:not(:hover,:focus,:focus-within,:active){background:var(--ellipsis-bg)}::slotted([slot=actions]){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}::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.css.map */
8
8
 
9
9
  ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
10
10
  </style>
11
11
  <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
12
- <div class="card ${e}" tabindex="0" part="card">
12
+ <div class="card ${i}" tabindex="0" part="card">
13
13
  ${this.createCardConent()}
14
14
  </div>
15
- `,this.shadowRoot.appendChild(t.content.cloneNode(!0)),document.getElementById("cardGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="cardGlobal">@supports not selector(:has(*)){iam-card{margin-bottom:2rem;display:block}}iam-card>div:has([type=checkbox]){display:contents}iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox])+label{position:absolute !important;top:.5rem;right:.5rem;width:2rem;padding-left:2rem;margin:0.25rem 0.5rem !important;height:2.5rem;overflow:hidden}iam-card:has([type=checkbox]:checked){--hover-outline-colour: var(--colour-info);--outline-colour: var(--colour-info)}iam-card:has([type=checkbox]+label:hover){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card:has([type=checkbox]:active){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card.card--has-icon:not(.card--filter):not(.card--secondary) i{position:absolute;top:calc(50% - .5rem - 2px);left:1rem}iam-card .badge i{position:static !important;margin-right:.25rem}[data-select-container]:has([type=checkbox]:checked) iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox]){width:100%;height:100%;max-height:100%;max-width:100%;cursor:pointer;pointer-events:all;inset:0;border-radius:0;z-index:10}a[target=_blank] iam-card::part(card){--icon: var(--icon-new-tab)}/*# sourceMappingURL=assets/css/components/card.global.css.map */
16
- </style>`)}createCardConent(){return`${this.hasAttribute("data-image")||this.hasAttribute("data-record")?`<div class="card__head">${this.hasAttribute("data-image")?`<img src="${this.getAttribute("data-image")}" alt="" loading="lazy" />`:""} <div class="card__badges"><slot name="badges"></slot></div></div>`:""}
15
+ `,this.shadowRoot.appendChild(a.content.cloneNode(!0)),document.getElementById("cardGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="cardGlobal">iam-card{margin-bottom:1.5rem;display:block}@supports not selector(:has(*)){iam-card{margin-bottom:2rem;display:block}}iam-card>div:has([type=checkbox]){display:contents}iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox])+label{position:absolute !important;top:.5rem;right:.5rem;width:2rem;padding-left:2rem;margin:0.25rem 0.5rem !important;height:2.5rem;overflow:hidden}iam-card:has([type=checkbox]:checked){--hover-outline-colour: var(--colour-info);--outline-colour: var(--colour-info)}iam-card:has([type=checkbox]+label:hover){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card:has([type=checkbox]:active){--hover-outline-colour: transparent;--hover-icon-bg: var(--colour-warning);--hover-icon-colour: var(--colour-primary-theme);--card-icon-right-overide:1rem}iam-card.card--has-icon:not(.card--filter):not(.card--secondary) i{position:absolute;top:calc(50% - .5rem - 2px);left:1rem}iam-card .badge i{position:static !important;margin-right:.25rem}:is(a,button,label) iam-card{margin-bottom:0 !important}[data-select-container]:has([type=checkbox]:checked) iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox]){width:100%;height:100%;max-height:100%;max-width:100%;cursor:pointer;pointer-events:all;inset:0;border-radius:0;z-index:10}a[target=_blank] iam-card::part(card){--icon: var(--icon-new-tab)}/*# sourceMappingURL=assets/css/components/card.global.css.map */
16
+ </style>`)}createCardConent(){return`${this.hasAttribute("data-image")||this.hasAttribute("data-record")?`<div class="card__head" part="head">${this.hasAttribute("data-image")?`<img src="${this.getAttribute("data-image")}" alt="" loading="lazy" />`:""} <div class="card__badges"><slot name="badges"></slot></div></div>`:""}
17
17
  <div class="card__body" part="body">
18
18
  ${!this.hasAttribute("data-image")&&this.querySelector('[slot="badges"]')&&this.querySelector('[slot="checkbox"]')?'<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>':""}
19
19
  ${!this.hasAttribute("data-image")&&!this.hasAttribute("data-record")&&this.querySelector('[slot="badges"]')?'<div class="card__badges"><slot name="badges"></slot></div>':""}
@@ -23,9 +23,16 @@
23
23
  </div>
24
24
  ${this.hasAttribute("data-add-link")?'<button class="btn btn-compact btn-secondary fa-plus">Add property</button>':""}
25
25
  <slot name="checkbox"></slot>
26
+ <slot name="primary-action"></slot>
27
+ <div class="dialog__wrapper d-none">
28
+ <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="${this.hasAttribute("data-menu-title")?this.getAttribute("data-menu-title"):"Further actions"}">Lorum ipsum</button>
29
+ <dialog class="dialog--fix dialog--list" id="actions" popover>
30
+ <slot name="actions"></slot>
31
+ </dialog>
32
+ </div>
26
33
  <div class="card__footer" part="footer">
27
34
  <slot name="footer"></slot>
28
35
  <slot name="btns"></slot>
29
36
  ${this.hasAttribute("data-cta")?`<span class="link d-inline-block pt-0 mb-0">${this.getAttribute("data-cta")}</span>`:""}
30
- </div>`}connectedCallback(){this.classList.add("loaded");const e=this.parentNode.closest("a, button, label, router-link"),r=this.shadowRoot.querySelector(".card"),o=this.shadowRoot.querySelector(".btn-compact");if(this.hasAttribute("data-record")&&this.getAttribute("data-record"),!e)return!1;if(e&&e.setAttribute("tabindex","-1"),e.matches("label[for]")&&(document.getElementById(e.getAttribute("for")).checked?r.classList.add("checked"):r.classList.remove("checked")),this.addEventListener("click",t=>{let a=new Event("click");r.dispatchEvent(a)}),r.addEventListener("click",t=>{if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(e.getAttribute("for")),i=a.getAttribute("name"),c=a.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"][type="radio"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),a.checked?r.classList.add("checked"):r.classList.remove("checked")}}),this.addEventListener("inactive",t=>{r.classList.remove("checked")}),r.addEventListener("keydown",t=>{switch(t.keyCode){case 32:case 13:if(e.matches("label[for]")){t.stopPropagation(),t.preventDefault();const a=document.getElementById(e.getAttribute("for")),i=a.getAttribute("name"),c=a.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"]:not([id="${c}"])`)).forEach((d,l)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),a.checked?r.classList.add("checked"):r.classList.remove("checked")}else e.click();break}}),o){let t=this.getAttribute("data-add-link");o.addEventListener("click",a=>{a.stopPropagation(),a.preventDefault(),window.location=t})}}static get observedAttributes(){return["data-total","class","data-image"]}attributeChangedCallback(e,r,o){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=o);break}case"class":{if(r!=o){let t=this.classList.toString();this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)')&&(t+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${t}`),this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent()}break}case"data-image":{r!=o&&(this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent());break}}}}export{m as default};
37
+ </div>`}connectedCallback(){this.classList.add("loaded");const i=this,t=i.parentNode.closest("a, button, label, router-link"),r=this.shadowRoot.querySelector(".card"),a=this.shadowRoot.querySelector(".btn-compact");this.hasAttribute("data-record")&&this.getAttribute("data-record");const l=this.shadowRoot.querySelector(".dialog__wrapper");let s=i.querySelectorAll('button[slot="actions"],a[slot="actions"]');if(s.length){const e=this.shadowRoot.querySelector(".dialog__wrapper");this.shadowRoot.querySelector(".dialog__wrapper dialog"),e.querySelector("button"),e.classList.remove("d-none"),Array.from(s).forEach((o,d)=>{o.classList.add("btn"),o.classList.add("btn-action")})}else l.remove();if(!t)return!1;if(t&&t.setAttribute("tabindex","-1"),t.matches("label[for]")&&(document.getElementById(t.getAttribute("for")).checked?r.classList.add("checked"):r.classList.remove("checked")),this.addEventListener("click",e=>{let o=new Event("click");r.dispatchEvent(o)}),r.addEventListener("click",e=>{if(t.matches("label[for]")){e.stopPropagation(),e.preventDefault();const o=document.getElementById(t.getAttribute("for")),d=o.getAttribute("name"),c=o.getAttribute("id");Array.from(document.querySelectorAll(`[name="${d}"][type="radio"]:not([id="${c}"])`)).forEach((n,m)=>{document.querySelector(`[for="${n.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),t.click(),o.checked?r.classList.add("checked"):r.classList.remove("checked")}}),this.addEventListener("inactive",e=>{r.classList.remove("checked")}),r.addEventListener("keydown",e=>{switch(e.keyCode){case 32:case 13:if(t.matches("label[for]")){e.stopPropagation(),e.preventDefault();const o=document.getElementById(t.getAttribute("for")),d=o.getAttribute("name"),c=o.getAttribute("id");Array.from(document.querySelectorAll(`[name="${d}"]:not([id="${c}"])`)).forEach((n,m)=>{document.querySelector(`[for="${n.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),t.click(),o.checked?r.classList.add("checked"):r.classList.remove("checked")}else t.click();break}}),a){let e=this.getAttribute("data-add-link");a.addEventListener("click",o=>{o.stopPropagation(),o.preventDefault(),window.location=e})}}static get observedAttributes(){return["data-total","class","data-image"]}attributeChangedCallback(i,t,r){switch(i){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=r);break}case"class":{if(t!=r){let a=this.classList.toString();this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)')&&(a+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${a}`),this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent()}break}case"data-image":{t!=r&&(this.shadowRoot.querySelector(".card").innerHTML=this.createCardConent());break}}}}export{g as default};
31
38
  //# sourceMappingURL=card.component.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n this.classList.add('card--has-icon');\n let classList = this.classList.toString();\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/card.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/card.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"card ${classList}\" tabindex=\"0\" part=\"card\">\n ${this.createCardConent()}\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('cardGlobal'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"cardGlobal\">${loadExtraCSS}</style>`);\n }\n createCardConent() {\n return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class=\"card__head\">${this.hasAttribute('data-image') ? `<img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" />` : ``} <div class=\"card__badges\"><slot name=\"badges\"></slot></div></div>` : ''}\n <div class=\"card__body\" part=\"body\">\n ${!this.hasAttribute('data-image') && this.querySelector('[slot=\"badges\"]') && this.querySelector('[slot=\"checkbox\"]') ? `<div class=\"card__badges card__badges--inline\"><slot name=\"badges\"></slot></div>` : ''}\n ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot=\"badges\"]') ? `<div class=\"card__badges\"><slot name=\"badges\"></slot></div>` : ''}\n ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n <slot></slot>\n ${this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n </div>\n ${this.hasAttribute('data-add-link') ? `<button class=\"btn btn-compact btn-secondary fa-plus\">Add property</button>` : ''}\n <slot name=\"checkbox\"></slot>\n <div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n <slot name=\"btns\"></slot>\n ${this.hasAttribute('data-cta') ? `<span class=\"link d-inline-block pt-0 mb-0\">${this.getAttribute('data-cta')}</span>` : ''}\n </div>`;\n }\n connectedCallback() {\n this.classList.add('loaded');\n // Mimic clicking the parent node so the focus and target events can be on the card\n const parentNode = this.parentNode.closest('a, button, label, router-link');\n const card = this.shadowRoot.querySelector('.card');\n const btnCompact = this.shadowRoot.querySelector('.btn-compact');\n const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';\n /*\n If the parentNode is actually just a div,\n we don't want to look for anything or add events\n */\n if (!parentNode) {\n return false;\n }\n if (parentNode)\n parentNode.setAttribute('tabindex', '-1');\n if (parentNode.matches('label[for]')) {\n let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n // Click event down\n this.addEventListener('click', (event) => {\n let clickEvent = new Event('click');\n card.dispatchEvent(clickEvent);\n });\n card.addEventListener('click', (event) => {\n if (parentNode.matches('label[for]')) {\n event.stopPropagation();\n event.preventDefault();\n const input = document.getElementById(parentNode.getAttribute('for'));\n const inputName = input.getAttribute('name');\n const inputID = input.getAttribute('id');\n // Mimic radio button functionality\n const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n inputs.forEach((input, index) => {\n const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n otherCard.dispatchEvent(new Event('inactive'));\n });\n parentNode.click();\n let isChecked = input.checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n });\n this.addEventListener('inactive', (event) => {\n card.classList.remove('checked');\n });\n card.addEventListener('keydown', (event) => {\n switch (event.keyCode) {\n case 32:\n case 13:\n if (parentNode.matches('label[for]')) {\n event.stopPropagation();\n event.preventDefault();\n const input = document.getElementById(parentNode.getAttribute('for'));\n const inputName = input.getAttribute('name');\n const inputID = input.getAttribute('id');\n const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n inputs.forEach((input, index) => {\n const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n otherCard.dispatchEvent(new Event('inactive'));\n });\n parentNode.click();\n let isChecked = input.checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n else {\n parentNode.click();\n }\n break;\n default:\n break;\n }\n });\n if (btnCompact) {\n let addLocation = this.getAttribute('data-add-link');\n btnCompact.addEventListener('click', (event) => {\n event.stopPropagation();\n event.preventDefault();\n window.location = addLocation;\n });\n }\n }\n static get observedAttributes() {\n return [\"data-total\", \"class\", \"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 \"class\": {\n if (oldVal != newVal) {\n let classList = this.classList.toString();\n if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*=\"fa-\"]:not(.btn)'))\n classList += ' card--has-icon';\n this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n }\n break;\n }\n case \"data-image\": {\n if (oldVal != newVal) {\n this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n }\n break;\n }\n }\n }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","parentNode","card","btnCompact","event","clickEvent","input","inputName","inputID","index","addLocation","attrName","oldVal","newVal"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,MACf,CAAC,EACD,MAAMA,UAAgB,WAAY,CAC9B,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAC9B,KAAK,cAAc,+DAA+D,GAClF,KAAK,UAAU,IAAI,gBAAgB,EACvC,IAAIC,EAAY,KAAK,UAAU,SAAQ,EACvC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,qBAGzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA,uBAGrDF;AAAA,QACf,KAAK;;MAGL,KAAK,WAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,EAEvD,SAAS,eAAe,YAAY,GACrC,SAAS,KAAK,mBAAmB,YAAa;AAAA,SAAgD,CACrG,CACD,kBAAmB,CACf,MAAO,GAAG,KAAK,aAAa,YAAY,GAAK,KAAK,aAAa,aAAa,EAAI,2BAA2B,KAAK,aAAa,YAAY,EAAI,aAAa,KAAK,aAAa,YAAY,8BAAgC,uEAAyE;AAAA;AAAA,MAEnS,CAAC,KAAK,aAAa,YAAY,GAAK,KAAK,cAAc,iBAAiB,GAAK,KAAK,cAAc,mBAAmB,EAAI,mFAAqF;AAAA,MAC5M,CAAC,KAAK,aAAa,YAAY,GAAK,CAAC,KAAK,aAAa,aAAa,GAAK,KAAK,cAAc,iBAAiB,EAAI,8DAAgE;AAAA,MACjL,KAAK,aAAa,mBAAmB,EAAI,6CAA6C,KAAK,aAAa,mBAAmB,oCAAsC;AAAA;AAAA,MAEjK,KAAK,aAAa,YAAY,EAAI,4BAA4B,KAAK,aAAa,YAAY,UAAY;AAAA;AAAA,MAExG,KAAK,aAAa,eAAe,EAAI,8EAAgF;AAAA;AAAA;AAAA;AAAA;AAAA,QAKnH,KAAK,aAAa,UAAU,EAAI,+CAA+C,KAAK,aAAa,UAAU,WAAa;AAAA,WAE3H,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,QAAQ,EAE3B,MAAMC,EAAa,KAAK,WAAW,QAAQ,+BAA+B,EACpEC,EAAO,KAAK,WAAW,cAAc,OAAO,EAC5CC,EAAa,KAAK,WAAW,cAAc,cAAc,EAM/D,GALmB,KAAK,aAAa,aAAa,GAAI,KAAK,aAAa,aAAa,EAKjF,CAACF,EACD,MAAO,GAsEX,GApEIA,GACAA,EAAW,aAAa,WAAY,IAAI,EACxCA,EAAW,QAAQ,YAAY,IACf,SAAS,eAAeA,EAAW,aAAa,KAAK,CAAC,EAAE,QAEpEC,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,GAGvC,KAAK,iBAAiB,QAAUE,GAAU,CACtC,IAAIC,EAAa,IAAI,MAAM,OAAO,EAClCH,EAAK,cAAcG,CAAU,CACzC,CAAS,EACDH,EAAK,iBAAiB,QAAUE,GAAU,CACtC,GAAIH,EAAW,QAAQ,YAAY,EAAG,CAClCG,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeL,EAAW,aAAa,KAAK,CAAC,EAC9DM,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EAExB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,8BAAsCC,MAAY,CAAC,EAC1G,QAAQ,CAACF,EAAOG,IAAU,CACX,SAAS,cAAc,SAASH,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACjE,CAAiB,EACDL,EAAW,MAAK,EACAK,EAAM,QAElBJ,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,EAEnD,CAAS,EACD,KAAK,iBAAiB,WAAaE,GAAU,CACzCF,EAAK,UAAU,OAAO,SAAS,CAC3C,CAAS,EACDA,EAAK,iBAAiB,UAAYE,GAAU,CACxC,OAAQA,EAAM,QAAO,CACjB,IAAK,IACL,IAAK,IACD,GAAIH,EAAW,QAAQ,YAAY,EAAG,CAClCG,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeL,EAAW,aAAa,KAAK,CAAC,EAC9DM,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EACxB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,gBAAwBC,MAAY,CAAC,EAC5F,QAAQ,CAACF,EAAOG,IAAU,CACX,SAAS,cAAc,SAASH,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACzE,CAAyB,EACDL,EAAW,MAAK,EACAK,EAAM,QAElBJ,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,OAGnCD,EAAW,MAAK,EAEpB,KAGP,CACb,CAAS,EACGE,EAAY,CACZ,IAAIO,EAAc,KAAK,aAAa,eAAe,EACnDP,EAAW,iBAAiB,QAAUC,GAAU,CAC5CA,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,OAAO,SAAWM,CAClC,CAAa,EAER,CACD,WAAW,oBAAqB,CAC5B,MAAO,CAAC,aAAc,QAAS,YAAY,CAC9C,CACD,yBAAyBC,EAAUC,EAAQC,EAAQ,CAC/C,OAAQF,EAAQ,CACZ,IAAK,aAAc,CACX,KAAK,WAAW,cAAc,cAAc,IAC5C,KAAK,WAAW,cAAc,cAAc,EAAE,UAAYE,GAC9D,KACH,CACD,IAAK,QAAS,CACV,GAAID,GAAUC,EAAQ,CAClB,IAAIhB,EAAY,KAAK,UAAU,SAAQ,EACnC,KAAK,cAAc,+DAA+D,IAClFA,GAAa,mBACjB,KAAK,WAAW,cAAc,OAAO,EAAE,aAAa,QAAS,QAAQA,GAAW,EAChF,KAAK,WAAW,cAAc,OAAO,EAAE,UAAY,KAAK,mBAE5D,KACH,CACD,IAAK,aAAc,CACXe,GAAUC,IACV,KAAK,WAAW,cAAc,OAAO,EAAE,UAAY,KAAK,oBAE5D,KACH,CACJ,CACJ,CACL"}
1
+ {"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*=\"fa-\"]:not(.btn)'))\n this.classList.add('card--has-icon');\n let classList = this.classList.toString();\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/card.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/card.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"card ${classList}\" tabindex=\"0\" part=\"card\">\n ${this.createCardConent()}\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('cardGlobal'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"cardGlobal\">${loadExtraCSS}</style>`);\n }\n createCardConent() {\n // TODO split this out a bit\n return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class=\"card__head\" part=\"head\">${this.hasAttribute('data-image') ? `<img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" />` : ``} <div class=\"card__badges\"><slot name=\"badges\"></slot></div></div>` : ''}\n <div class=\"card__body\" part=\"body\">\n ${!this.hasAttribute('data-image') && this.querySelector('[slot=\"badges\"]') && this.querySelector('[slot=\"checkbox\"]') ? `<div class=\"card__badges card__badges--inline\"><slot name=\"badges\"></slot></div>` : ''}\n ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot=\"badges\"]') ? `<div class=\"card__badges\"><slot name=\"badges\"></slot></div>` : ''}\n ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n <slot></slot>\n ${this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n </div>\n ${this.hasAttribute('data-add-link') ? `<button class=\"btn btn-compact btn-secondary fa-plus\">Add property</button>` : ''}\n <slot name=\"checkbox\"></slot>\n <slot name=\"primary-action\"></slot>\n <div class=\"dialog__wrapper d-none\">\n <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical\" popovertarget=\"actions\" title=\"${this.hasAttribute('data-menu-title') ? this.getAttribute('data-menu-title') : 'Further actions'}\">Lorum ipsum</button>\n <dialog class=\"dialog--fix dialog--list\" id=\"actions\" popover>\n <slot name=\"actions\"></slot>\n </dialog>\n </div>\n <div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n <slot name=\"btns\"></slot>\n ${this.hasAttribute('data-cta') ? `<span class=\"link d-inline-block pt-0 mb-0\">${this.getAttribute('data-cta')}</span>` : ''}\n </div>`;\n }\n connectedCallback() {\n this.classList.add('loaded');\n // Mimic clicking the parent node so the focus and target events can be on the card\n const component = this;\n const parentNode = component.parentNode.closest('a, button, label, router-link');\n const card = this.shadowRoot.querySelector('.card');\n const btnCompact = this.shadowRoot.querySelector('.btn-compact');\n const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';\n // Add the actions slot to the buttons and links to move them into a dialog warpper\n const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');\n let buttons = component.querySelectorAll('button[slot=\"actions\"],a[slot=\"actions\"]');\n if (buttons.length) {\n const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');\n const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');\n const actionsBtn = actionsWrapper.querySelector('button');\n actionsWrapper.classList.remove('d-none');\n Array.from(buttons).forEach((button, index) => {\n button.classList.add('btn');\n button.classList.add('btn-action');\n });\n }\n else {\n actionsWrapper.remove();\n }\n /*\n If the parentNode is actually just a div,\n we don't want to look for anything or add events\n */\n if (!parentNode) {\n return false;\n }\n if (parentNode)\n parentNode.setAttribute('tabindex', '-1');\n if (parentNode.matches('label[for]')) {\n let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n // Click event down\n this.addEventListener('click', (event) => {\n let clickEvent = new Event('click');\n card.dispatchEvent(clickEvent);\n });\n card.addEventListener('click', (event) => {\n if (parentNode.matches('label[for]')) {\n event.stopPropagation();\n event.preventDefault();\n const input = document.getElementById(parentNode.getAttribute('for'));\n const inputName = input.getAttribute('name');\n const inputID = input.getAttribute('id');\n // Mimic radio button functionality\n const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n inputs.forEach((input, index) => {\n const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n otherCard.dispatchEvent(new Event('inactive'));\n });\n parentNode.click();\n let isChecked = input.checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n });\n this.addEventListener('inactive', (event) => {\n card.classList.remove('checked');\n });\n card.addEventListener('keydown', (event) => {\n switch (event.keyCode) {\n case 32:\n case 13:\n if (parentNode.matches('label[for]')) {\n event.stopPropagation();\n event.preventDefault();\n const input = document.getElementById(parentNode.getAttribute('for'));\n const inputName = input.getAttribute('name');\n const inputID = input.getAttribute('id');\n const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n inputs.forEach((input, index) => {\n const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n otherCard.dispatchEvent(new Event('inactive'));\n });\n parentNode.click();\n let isChecked = input.checked;\n if (isChecked)\n card.classList.add('checked');\n else\n card.classList.remove('checked');\n }\n else {\n parentNode.click();\n }\n break;\n default:\n break;\n }\n });\n if (btnCompact) {\n let addLocation = this.getAttribute('data-add-link');\n btnCompact.addEventListener('click', (event) => {\n event.stopPropagation();\n event.preventDefault();\n window.location = addLocation;\n });\n }\n }\n static get observedAttributes() {\n return [\"data-total\", \"class\", \"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 \"class\": {\n if (oldVal != newVal) {\n let classList = this.classList.toString();\n if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*=\"fa-\"]:not(.btn)'))\n classList += ' card--has-icon';\n this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n }\n break;\n }\n case \"data-image\": {\n if (oldVal != newVal) {\n this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();\n }\n break;\n }\n }\n }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","component","parentNode","card","btnCompact","actionsWrapper","buttons","button","index","event","clickEvent","input","inputName","inputID","addLocation","attrName","oldVal","newVal"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,MACf,CAAC,EACD,MAAMA,UAAgB,WAAY,CAC9B,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAC9B,KAAK,cAAc,2EAA2E,GAC9F,KAAK,UAAU,IAAI,gBAAgB,EACvC,IAAIC,EAAY,KAAK,UAAU,SAAQ,EACvC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,qBAGzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA,uBAGrDF;AAAA,QACf,KAAK;;MAGL,KAAK,WAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,EAEvD,SAAS,eAAe,YAAY,GACrC,SAAS,KAAK,mBAAmB,YAAa;AAAA,SAAgD,CACrG,CACD,kBAAmB,CAEf,MAAO,GAAG,KAAK,aAAa,YAAY,GAAK,KAAK,aAAa,aAAa,EAAI,uCAAuC,KAAK,aAAa,YAAY,EAAI,aAAa,KAAK,aAAa,YAAY,8BAAgC,uEAAyE;AAAA;AAAA,MAE/S,CAAC,KAAK,aAAa,YAAY,GAAK,KAAK,cAAc,iBAAiB,GAAK,KAAK,cAAc,mBAAmB,EAAI,mFAAqF;AAAA,MAC5M,CAAC,KAAK,aAAa,YAAY,GAAK,CAAC,KAAK,aAAa,aAAa,GAAK,KAAK,cAAc,iBAAiB,EAAI,8DAAgE;AAAA,MACjL,KAAK,aAAa,mBAAmB,EAAI,6CAA6C,KAAK,aAAa,mBAAmB,oCAAsC;AAAA;AAAA,MAEjK,KAAK,aAAa,YAAY,EAAI,4BAA4B,KAAK,aAAa,YAAY,UAAY;AAAA;AAAA,MAExG,KAAK,aAAa,eAAe,EAAI,8EAAgF;AAAA;AAAA;AAAA;AAAA,0GAIjB,KAAK,aAAa,iBAAiB,EAAI,KAAK,aAAa,iBAAiB,EAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQhL,KAAK,aAAa,UAAU,EAAI,+CAA+C,KAAK,aAAa,UAAU,WAAa;AAAA,WAE3H,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,QAAQ,EAE3B,MAAMC,EAAY,KACZC,EAAaD,EAAU,WAAW,QAAQ,+BAA+B,EACzEE,EAAO,KAAK,WAAW,cAAc,OAAO,EAC5CC,EAAa,KAAK,WAAW,cAAc,cAAc,EAC5C,KAAK,aAAa,aAAa,GAAI,KAAK,aAAa,aAAa,EAErF,MAAMC,EAAiB,KAAK,WAAW,cAAc,kBAAkB,EACvE,IAAIC,EAAUL,EAAU,iBAAiB,0CAA0C,EACnF,GAAIK,EAAQ,OAAQ,CAChB,MAAMD,EAAiB,KAAK,WAAW,cAAc,kBAAkB,EACjD,KAAK,WAAW,cAAc,yBAAyB,EAC1DA,EAAe,cAAc,QAAQ,EACxDA,EAAe,UAAU,OAAO,QAAQ,EACxC,MAAM,KAAKC,CAAO,EAAE,QAAQ,CAACC,EAAQC,IAAU,CAC3CD,EAAO,UAAU,IAAI,KAAK,EAC1BA,EAAO,UAAU,IAAI,YAAY,CACjD,CAAa,OAGDF,EAAe,OAAM,EAMzB,GAAI,CAACH,EACD,MAAO,GAsEX,GApEIA,GACAA,EAAW,aAAa,WAAY,IAAI,EACxCA,EAAW,QAAQ,YAAY,IACf,SAAS,eAAeA,EAAW,aAAa,KAAK,CAAC,EAAE,QAEpEC,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,GAGvC,KAAK,iBAAiB,QAAUM,GAAU,CACtC,IAAIC,EAAa,IAAI,MAAM,OAAO,EAClCP,EAAK,cAAcO,CAAU,CACzC,CAAS,EACDP,EAAK,iBAAiB,QAAUM,GAAU,CACtC,GAAIP,EAAW,QAAQ,YAAY,EAAG,CAClCO,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeT,EAAW,aAAa,KAAK,CAAC,EAC9DU,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EAExB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,8BAAsCC,MAAY,CAAC,EAC1G,QAAQ,CAACF,EAAOH,IAAU,CACX,SAAS,cAAc,SAASG,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACjE,CAAiB,EACDT,EAAW,MAAK,EACAS,EAAM,QAElBR,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,EAEnD,CAAS,EACD,KAAK,iBAAiB,WAAaM,GAAU,CACzCN,EAAK,UAAU,OAAO,SAAS,CAC3C,CAAS,EACDA,EAAK,iBAAiB,UAAYM,GAAU,CACxC,OAAQA,EAAM,QAAO,CACjB,IAAK,IACL,IAAK,IACD,GAAIP,EAAW,QAAQ,YAAY,EAAG,CAClCO,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeT,EAAW,aAAa,KAAK,CAAC,EAC9DU,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EACxB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,gBAAwBC,MAAY,CAAC,EAC5F,QAAQ,CAACF,EAAOH,IAAU,CACX,SAAS,cAAc,SAASG,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACzE,CAAyB,EACDT,EAAW,MAAK,EACAS,EAAM,QAElBR,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,OAGnCD,EAAW,MAAK,EAEpB,KAGP,CACb,CAAS,EACGE,EAAY,CACZ,IAAIU,EAAc,KAAK,aAAa,eAAe,EACnDV,EAAW,iBAAiB,QAAUK,GAAU,CAC5CA,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,OAAO,SAAWK,CAClC,CAAa,EAER,CACD,WAAW,oBAAqB,CAC5B,MAAO,CAAC,aAAc,QAAS,YAAY,CAC9C,CACD,yBAAyBC,EAAUC,EAAQC,EAAQ,CAC/C,OAAQF,EAAQ,CACZ,IAAK,aAAc,CACX,KAAK,WAAW,cAAc,cAAc,IAC5C,KAAK,WAAW,cAAc,cAAc,EAAE,UAAYE,GAC9D,KACH,CACD,IAAK,QAAS,CACV,GAAID,GAAUC,EAAQ,CAClB,IAAIpB,EAAY,KAAK,UAAU,SAAQ,EACnC,KAAK,cAAc,2EAA2E,IAC9FA,GAAa,mBACjB,KAAK,WAAW,cAAc,OAAO,EAAE,aAAa,QAAS,QAAQA,GAAW,EAChF,KAAK,WAAW,cAAc,OAAO,EAAE,UAAY,KAAK,mBAE5D,KACH,CACD,IAAK,aAAc,CACXmB,GAAUC,IACV,KAAK,WAAW,cAAc,OAAO,EAAE,UAAY,KAAK,oBAE5D,KACH,CACJ,CACJ,CACL"}
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */function p(l,o){var i;let t=l.querySelector(".carousel__inner"),u=l.querySelector(".carousel__controls"),n=o.querySelectorAll(":scope > .col").length;t.addEventListener("scroll",function(a){clearTimeout(i),i=setTimeout(function(){let s=t.clientWidth,e=t.scrollWidth,r=t.scrollLeft,d=Math.round(r/e*n)+1,m=o.querySelector(":scope > .col").scrollWidth,b=o.querySelector(":scope > .col:last-child").offsetLeft,f=t.scrollLeft+s+t.getBoundingClientRect().left>=b+60,h=Math.round(s/m);Math.ceil(n/h)*h-n>0&&f&&(d=Math.floor(n/h)*h+1),Array.from(l.querySelectorAll(".carousel__controls button")).forEach((_,w)=>{_.removeAttribute("aria-current")}),l.querySelector(".control-"+d).setAttribute("aria-current",!0),d==1?l.querySelector(".btn-prev").setAttribute("disabled","disabled"):l.querySelector(".btn-prev").removeAttribute("disabled"),d>n-h?l.querySelector(".btn-next").setAttribute("disabled","disabled"):l.querySelector(".btn-next").removeAttribute("disabled")},100)},!1),u.addEventListener("click",function(a){for(var s=a.target;s&&s!=this;s=s.parentNode)if(typeof s.matches=="function"&&s.matches("button")){a.preventDefault(),Array.from(u.querySelectorAll("button")).forEach((r,d)=>{r.removeAttribute("aria-current")}),s.setAttribute("aria-current",!0);const e=o.querySelector(`:scope > *:nth-child(${s.getAttribute("data-slide")})`);t.scroll({top:0,left:e.offsetLeft-t.getBoundingClientRect().left,behavior:"smooth"});break}},!1),l.addEventListener("click",function(a){let s=t.clientWidth;t.scrollWidth;let e=o.querySelector(":scope > .col").scrollWidth,r=Math.round(s/e),d=o.querySelector(":scope > .col:last-child").offsetLeft,m=t.scrollLeft+s+t.getBoundingClientRect().left>=d+60,b=Math.ceil(n/r)*r-n,f=r-b,h=m&&b>0?f*e:t.clientWidth;for(var c=a.target;c&&c!=this;c=c.parentNode)if(typeof c.matches=="function"&&c.matches(".btn-next, .btn-prev")){a.preventDefault();let _=c.classList.contains("btn-prev")?t.scrollLeft-h:t.scrollLeft+t.clientWidth;t.scroll({top:0,left:_,behavior:"smooth"});break}},!1)}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"carousel"});class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class a extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
5
5
  <style class="styles">
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */function v(d,s){const n=s.querySelector(".files"),i=s.querySelector(".drop-area"),e=d.querySelector("input"),f=d.hasAttribute("data-maxsize")?d.getAttribute("data-maxsize"):0,u=s.querySelector(".invalid-feedback.size"),h=s.querySelector(".invalid-feedback.ext"),o=e.cloneNode();i.append(o);let b=function(t){if(!e.hasAttribute("accept"))return!0;const r=t.split(".").pop();return!!e.getAttribute("accept").includes(r)};if(s.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest(".btn-primary")&&(t.target.closest(".btn-primary"),h.classList.remove("d-block"),u.classList.remove("d-block"),(e.hasAttribute("multiple")?o:e).click())}),s.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest(".files button")){const r=new DataTransfer,{files:a}=e,m=t.target.closest(".files button");for(let p=0;p<a.length;p++){const l=a[p];l.name!=m.getAttribute("data-file")&&r.items.add(l)}e.files=r.files;const c=new Event("change");e.dispatchEvent(c)}}),o.addEventListener("change",t=>{if(e.hasAttribute("multiple")){const a=[...e.files,...o.files];let m=[];const c=new DataTransfer;for(let p=0;p<a.length;p++){const l=a[p],g=l.size/1e3;!m.includes(l.name)&&(f==0||g<f)&&b(l.name)&&c.items.add(l),b(l.name)||h.classList.add("d-block"),g>f&&u.classList.add("d-block"),m.push(l.name)}e.files=c.files}else e.files=o.files;const r=new Event("change");e.dispatchEvent(r)}),o.addEventListener("dragenter",t=>{o.classList.add("focus")}),o.addEventListener("dragleave",t=>{o.classList.remove("focus")}),o.addEventListener("drop",t=>{o.classList.remove("focus")}),e.addEventListener("change",t=>{if(e.files.length==1){let a=e.files[0];const m=a.size/1e3;if(!b(a.name)){h.classList.add("d-block");const c=new DataTransfer;e.files=c.files}if(m>f){u.classList.add("d-block");const c=new DataTransfer;e.files=c.files}}n.innerHTML="";for(const a of e.files)n.innerHTML+=`<span class="file" part="file">${a.name} <button data-file="${a.name}">Remove</button></span>`;const r=new CustomEvent("elementchange",{detail:{files:e.files}});if(d.dispatchEvent(r),e.files.length==0){const a=new CustomEvent("empty");d.dispatchEvent(a)}}),d.hasAttribute("data-filename")){let t=d.getAttribute("data-filename");t&&(n.innerHTML=`<span class="file">${t} <button data-file="${t}">Remove</button></span>`)}}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const s=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",n=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${s}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */function i(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let r=e.textContent.toLowerCase();e.classList.add("d-none"),r.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class b extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",d=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
5
5
  <style class="styles">
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",i=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"mutliselect"});class b extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",s=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,r=document.createElement("template");r.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"nav"});class v extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
5
5
  <style class="styles">
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */function r(i){if(i.hasAttribute("data-type")&&i.getAttribute("data-type")=="toast"){let t=document.querySelector(".notification__holder");t||(t=document.createElement("div"),t.classList.add("notification__holder"),t.classList.add("container"),document.querySelector("body").appendChild(t)),i.closest(".notification__holder")||t.appendChild(i)}if(i.setAttribute("role","alert"),i.addEventListener("click",function(t){event&&event.target instanceof HTMLElement&&event.target.closest("[data-dismiss-button]")&&(t.preventDefault(),a(i))},!1),i.hasAttribute("data-timeout")){let t=i.getAttribute("data-timeout");var n=new c(function(){a(i)},t);i.addEventListener("mouseenter",o=>{n.pause()}),i.addEventListener("mouseleave",o=>{n.resume()})}}function c(i,n){var t,o,e=n;this.pause=function(){window.clearTimeout(t),e-=new Date-o},this.resume=function(){o=new Date,window.clearTimeout(t),t=window.setTimeout(i,e)},this.resume()}const a=function(i){i.classList.add("d-none")};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Notification"});class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,o=this.querySelectorAll("a,button");Array.from(o).forEach((s,l)=>{s.setAttribute("slot","btns"),s.classList.add("link")}),(o.length||this.hasAttribute("data-dismiss"))&&this.classList.add("notification--dismissable");const e=document.createElement("template");e.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */import k from"js-cookie";const q=e=>e.replace(/ /g,"_"),x=function(e){return e=e.toLowerCase(),e=q(e),e=e.replace(/\W/g,""),e},m=(e,s,a)=>s.split(/[\.\[\]\'\"]/).filter(o=>o).reduce((o,d)=>o?o[d]:a,e),S=e=>Array.isArray(e)||e!==null&&["function","object"].includes(typeof e);var L=function(e,s,a,o){function d(c){return c instanceof a?c:new a(function(n){n(c)})}return new(a||(a=Promise))(function(c,n){function v(r){try{u(o.next(r))}catch(i){n(i)}}function t(r){try{u(o.throw(r))}catch(i){n(i)}}function u(r){r.done?c(r.value):d(r.value).then(v,t)}u((o=o.apply(e,s||[])).next())})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Search"});class C extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const s=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",a=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${s}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
5
5
  <style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.7.1-beta5
2
+ * iamKey v6.0.0
3
3
  * Copyright 2022-2024 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Slider"});class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",p=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
5
5
  <style>