npm - @iamproperty/components - Versions diffs - 5.7.1-beta5 → 5.7.1-beta6 - Mend

@iamproperty/components 5.7.1-beta5 → 5.7.1-beta6

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 (59) hide show

package/assets/js/components/barchart/barchart.component.min.js.map CHANGED Viewed

	@@ -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":"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"}
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, 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, 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 (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, chartOuter, 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.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(chartElement, 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(chartElement, 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(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, chartOuter, 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, chartOuter);\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 /\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.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, 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 <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 chart.appendChild(clonedTable);\n addClasses(chartComponent, chartOuter);\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 if (barCount < 5) {\n chartComponent.classList.add('chart--no-scale');\n //chartComponent.classList.add('chart--display-data');\n }\n setupChart(chartComponent, chartOuter, clonedTable);\n setEventObservers(chartComponent, chartOuter);\n setEventListener(chartComponent, 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","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","type","yaxis","guidelines","targets","events","increment","start","end","slope","yInt","selector","values","largestValue","getValues","value","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","startDay","chartXaxis","position","createTooltips","titles","title","tooltipId","iamBarChart","template","chartComponent","clonedTable","barCount","attrName","oldVal","newVal"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ class iamCard extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
-        if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+        if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
             this.classList.add('card--has-icon');
         let classList = this.classList.toString();
         const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
@@ -34,6 +34,7 @@ class iamCard extends HTMLElement {
             document.head.insertAdjacentHTML('beforeend', `<style id="cardGlobal">${loadExtraCSS}</style>`);
     }
     createCardConent() {
+        // TODO split this out a bit
         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>` : ''}
     <div class="card__body" part="body">
     ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
@@ -44,6 +45,13 @@ class iamCard extends HTMLElement {
     </div>
     ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
     <slot name="checkbox"></slot>
+    <slot name="primary-action"></slot>
+    <div class="dialog__wrapper d-none">
+      <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>
+      <dialog class="dialog--fix dialog--list" id="actions" popover>
+        <slot name="actions"></slot>
+      </dialog>
+    </div>
     <div class="card__footer" part="footer">
       <slot name="footer"></slot>
       <slot name="btns"></slot>
@@ -53,10 +61,27 @@ class iamCard extends HTMLElement {
     connectedCallback() {
         this.classList.add('loaded');
         // Mimic clicking the parent node so the focus and target events can be on the card
-        const parentNode = this.parentNode.closest('a, button, label, router-link');
+        const component = this;
+        const parentNode = component.parentNode.closest('a, button, label, router-link');
         const card = this.shadowRoot.querySelector('.card');
         const btnCompact = this.shadowRoot.querySelector('.btn-compact');
         const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
+        // Add the actions slot to the buttons and links to move them into a dialog warpper
+        const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+        let buttons = component.querySelectorAll('button[slot="actions"],a[slot="actions"]');
+        if (buttons.length) {
+            const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+            const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');
+            const actionsBtn = actionsWrapper.querySelector('button');
+            actionsWrapper.classList.remove('d-none');
+            Array.from(buttons).forEach((button, index) => {
+                button.classList.add('btn');
+                button.classList.add('btn-action');
+            });
+        }
+        else {
+            actionsWrapper.remove();
+        }
         /*
           If the parentNode is actually just a div,
           we don't want to look for anything or add events
@@ -154,7 +179,7 @@ class iamCard extends HTMLElement {
             case "class": {
                 if (oldVal != newVal) {
                     let classList = this.classList.toString();
-                    if (this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+                    if (this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
                         classList += ' card--has-icon';
                     this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);
                     this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();

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

@@ -1,18 +1,18 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
-  */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=`
+  */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=`
     <style>
-    @import "${o}";
-    .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 */
+    @import "${r}";
+    .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 */
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="card ${e}" tabindex="0" part="card">
+    <div class="card ${i}" tabindex="0" part="card">
       ${this.createCardConent()}
     </div>
-    `,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 */
+    `,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 */
 </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>`:""}
     <div class="card__body" part="body">
     ${!this.hasAttribute("data-image")&&this.querySelector('[slot="badges"]')&&this.querySelector('[slot="checkbox"]')?'<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>':""}
@@ -23,9 +23,16 @@
     </div>
     ${this.hasAttribute("data-add-link")?'<button class="btn btn-compact btn-secondary fa-plus">Add property</button>':""}
     <slot name="checkbox"></slot>
+    <slot name="primary-action"></slot>
+    <div class="dialog__wrapper d-none">
+      <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>
+      <dialog class="dialog--fix dialog--list" id="actions" popover>
+        <slot name="actions"></slot>
+      </dialog>
+    </div>
     <div class="card__footer" part="footer">
       <slot name="footer"></slot>
       <slot name="btns"></slot>
       ${this.hasAttribute("data-cta")?`<span class="link d-inline-block pt-0 mb-0">${this.getAttribute("data-cta")}</span>`:""}
-    </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};
+    </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};
 //# sourceMappingURL=card.component.min.js.map

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

	@@ -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":"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"}
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\">${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":"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"}

package/assets/js/components/carousel/carousel.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style class="styles">

package/assets/js/components/fileupload/fileupload.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/filterlist/filterlist.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/header/header.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/inline-edit/inline-edit.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style class="styles">

package/assets/js/components/marketing/marketing.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/multiselect/multiselect.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/nav/nav.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style class="styles">

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>

package/assets/js/components/pagination/pagination.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.7.1-beta5
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */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=`
     <style>