@iamproperty/components 7.8.2--beta3 → 7.8.2--beta5

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 (235) hide show
  1. package/assets/css/components/actionbar.component.css +1 -1
  2. package/assets/css/components/actionbar.component.css.map +1 -1
  3. package/assets/css/components/address-lookup.component.css +1 -1
  4. package/assets/css/components/address-lookup.component.css.map +1 -1
  5. package/assets/css/components/advanced-select.component.css +1 -1
  6. package/assets/css/components/advanced-select.component.css.map +1 -1
  7. package/assets/css/components/banner.preload.css +1 -0
  8. package/assets/css/components/banner.preload.css.map +1 -0
  9. package/assets/css/components/calendar.component.css +1 -1
  10. package/assets/css/components/calendar.component.css.map +1 -1
  11. package/assets/css/components/card.component.css +1 -1
  12. package/assets/css/components/card.component.css.map +1 -1
  13. package/assets/css/components/card.module.css +1 -1
  14. package/assets/css/components/card.module.css.map +1 -1
  15. package/assets/css/components/card.preload.css +1 -0
  16. package/assets/css/components/card.preload.css.map +1 -0
  17. package/assets/css/components/carousel.component.css +1 -1
  18. package/assets/css/components/carousel.component.css.map +1 -1
  19. package/assets/css/components/carousel.config.css +1 -1
  20. package/assets/css/components/carousel.config.css.map +1 -1
  21. package/assets/css/components/config.component.css +1 -1
  22. package/assets/css/components/config.component.css.map +1 -1
  23. package/assets/css/components/content.component.css +1 -1
  24. package/assets/css/components/content.component.css.map +1 -1
  25. package/assets/css/components/fileupload.css +1 -1
  26. package/assets/css/components/fileupload.css.map +1 -1
  27. package/assets/css/components/filter-card.component.css +1 -1
  28. package/assets/css/components/filter-card.component.css.map +1 -1
  29. package/assets/css/components/modal.component.css +1 -1
  30. package/assets/css/components/modal.component.css.map +1 -1
  31. package/assets/css/components/multi-step-modal.component.css +1 -1
  32. package/assets/css/components/multi-step-modal.component.css.map +1 -1
  33. package/assets/css/components/multiselect.css +1 -1
  34. package/assets/css/components/multiselect.css.map +1 -1
  35. package/assets/css/components/nav.component.css +1 -1
  36. package/assets/css/components/nav.component.css.map +1 -1
  37. package/assets/css/components/nav.global.css +1 -1
  38. package/assets/css/components/nav.global.css.map +1 -1
  39. package/assets/css/components/notification.global.css +1 -1
  40. package/assets/css/components/notification.global.css.map +1 -1
  41. package/assets/css/components/pagination.css +1 -1
  42. package/assets/css/components/pagination.css.map +1 -1
  43. package/assets/css/components/record-card.component.css +1 -1
  44. package/assets/css/components/record-card.component.css.map +1 -1
  45. package/assets/css/components/search.component.css +1 -1
  46. package/assets/css/components/search.component.css.map +1 -1
  47. package/assets/css/components/skeleton.global.css +1 -1
  48. package/assets/css/components/skeleton.global.css.map +1 -1
  49. package/assets/css/components/slider.css +1 -1
  50. package/assets/css/components/slider.css.map +1 -1
  51. package/assets/css/components/split-button.component.css +1 -1
  52. package/assets/css/components/split-button.component.css.map +1 -1
  53. package/assets/css/components/std-nav-standalone.component.css +1 -1
  54. package/assets/css/components/std-nav-standalone.component.css.map +1 -1
  55. package/assets/css/components/tabs.component.css +1 -1
  56. package/assets/css/components/tabs.component.css.map +1 -1
  57. package/assets/css/components/tag.component.css +1 -1
  58. package/assets/css/components/tag.component.css.map +1 -1
  59. package/assets/css/components/video-card.component.css +1 -1
  60. package/assets/css/components/video-card.component.css.map +1 -1
  61. package/assets/css/components/video-modal.component.css +1 -1
  62. package/assets/css/components/video-modal.component.css.map +1 -1
  63. package/assets/css/core.min.css +1 -1
  64. package/assets/css/core.min.css.map +1 -1
  65. package/assets/css/elements/dialog.css +1 -1
  66. package/assets/css/elements/dialog.css.map +1 -1
  67. package/assets/css/elements/dropdown.css +1 -1
  68. package/assets/css/elements/dropdown.css.map +1 -1
  69. package/assets/css/elements/forms.css +1 -1
  70. package/assets/css/elements/forms.css.map +1 -1
  71. package/assets/css/elements/links--global.css +1 -1
  72. package/assets/css/elements/links--global.css.map +1 -1
  73. package/assets/css/elements/links.css +1 -1
  74. package/assets/css/elements/links.css.map +1 -1
  75. package/assets/css/style.min.css +1 -1
  76. package/assets/css/style.min.css.map +1 -1
  77. package/assets/js/components/accordion/accordion.component.min.js +1 -1
  78. package/assets/js/components/actionbar/actionbar.component.min.js +3 -3
  79. package/assets/js/components/address-lookup/address-lookup.component.min.js +4 -4
  80. package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
  81. package/assets/js/components/advanced-select/advanced-select.component.min.js +2 -2
  82. package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
  83. package/assets/js/components/banner/banner.component.min.js +1 -1
  84. package/assets/js/components/barchart/barchart.component.min.js +1 -1
  85. package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
  86. package/assets/js/components/bone/bone.component.min.js +1 -1
  87. package/assets/js/components/button/button.component.min.js +1 -1
  88. package/assets/js/components/calendar/calendar.component.min.js +2 -2
  89. package/assets/js/components/card/card.component.js +114 -125
  90. package/assets/js/components/card/card.component.min.js +7 -7
  91. package/assets/js/components/card/card.component.min.js.map +1 -1
  92. package/assets/js/components/carousel/carousel.component.js +83 -29
  93. package/assets/js/components/carousel/carousel.component.min.js +16 -11
  94. package/assets/js/components/carousel/carousel.component.min.js.map +1 -1
  95. package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
  96. package/assets/js/components/config/config.component.min.js +7 -7
  97. package/assets/js/components/config/config.component.min.js.map +1 -1
  98. package/assets/js/components/content/content.component.js +28 -69
  99. package/assets/js/components/content/content.component.min.js +4 -4
  100. package/assets/js/components/content/content.component.min.js.map +1 -1
  101. package/assets/js/components/darkmode/darkmode.component.min.js +1 -1
  102. package/assets/js/components/doughnutchart/doughnutchart.component.min.js +1 -1
  103. package/assets/js/components/fileupload/fileupload.component.min.js +2 -2
  104. package/assets/js/components/filter-card/filter-card.component.min.js +5 -5
  105. package/assets/js/components/filter-card/filter-card.component.min.js.map +1 -1
  106. package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
  107. package/assets/js/components/form/form.component.js +42 -151
  108. package/assets/js/components/form/form.component.min.js +3 -3
  109. package/assets/js/components/form/form.component.min.js.map +1 -1
  110. package/assets/js/components/header/header.component.min.js +1 -1
  111. package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
  112. package/assets/js/components/input/input.component.min.js +1 -1
  113. package/assets/js/components/input-range/input-range.component.min.js +1 -1
  114. package/assets/js/components/marketing/marketing.component.min.js +1 -1
  115. package/assets/js/components/menu/menu.component.min.js +1 -1
  116. package/assets/js/components/milestone/milestone.component.min.js +1 -1
  117. package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
  118. package/assets/js/components/modal/modal.component.js +16 -11
  119. package/assets/js/components/modal/modal.component.min.js +7 -7
  120. package/assets/js/components/modal/modal.component.min.js.map +1 -1
  121. package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
  122. package/assets/js/components/multi-step-modal/multi-step-modal.component.min.js +4 -4
  123. package/assets/js/components/multiselect/multiselect.component.min.js +4 -4
  124. package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
  125. package/assets/js/components/nav/nav.component.js +88 -79
  126. package/assets/js/components/nav/nav.component.min.js +8 -8
  127. package/assets/js/components/nav/nav.component.min.js.map +1 -1
  128. package/assets/js/components/notification/notification.component.min.js +2 -2
  129. package/assets/js/components/pagination/pagination.component.min.js +5 -5
  130. package/assets/js/components/password/password.component.min.js +1 -1
  131. package/assets/js/components/popover/popover.component.min.js +1 -1
  132. package/assets/js/components/rank/rank.component.min.js +1 -1
  133. package/assets/js/components/rankings/rankings.component.min.js +1 -1
  134. package/assets/js/components/rating/rating.component.min.js +1 -1
  135. package/assets/js/components/record-card/record-card.component.min.js +6 -6
  136. package/assets/js/components/record-card/record-card.component.min.js.map +1 -1
  137. package/assets/js/components/search/search.component.js +235 -186
  138. package/assets/js/components/search/search.component.min.js +12 -7
  139. package/assets/js/components/search/search.component.min.js.map +1 -1
  140. package/assets/js/components/skeleton/skeleton.component.min.js +1 -1
  141. package/assets/js/components/slider/slider.component.min.js +2 -2
  142. package/assets/js/components/split-button/split-button.component.min.js +2 -2
  143. package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js +5 -5
  144. package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js.map +1 -1
  145. package/assets/js/components/std-nav/std-nav.component.js +12 -9
  146. package/assets/js/components/std-nav/std-nav.component.min.js +12 -15
  147. package/assets/js/components/std-nav/std-nav.component.min.js.map +1 -1
  148. package/assets/js/components/std-nav-standalone/std-nav-standalone.component.min.js +5 -5
  149. package/assets/js/components/std-nav-standalone/std-nav-standalone.component.min.js.map +1 -1
  150. package/assets/js/components/table/table.component.min.js +1 -1
  151. package/assets/js/components/table-ajax/table-ajax.component.min.js +1 -1
  152. package/assets/js/components/table-basic/table-basic.component.min.js +1 -1
  153. package/assets/js/components/table-no-submit/table-no-submit.component.min.js +1 -1
  154. package/assets/js/components/table-submit/table-submit.component.min.js +1 -1
  155. package/assets/js/components/tabs/tabs.component.min.js +4 -4
  156. package/assets/js/components/tag/tag.component.min.js +3 -3
  157. package/assets/js/components/tag/tag.component.min.js.map +1 -1
  158. package/assets/js/components/tooltip/tooltip.component.min.js +1 -1
  159. package/assets/js/components/video/video.component.min.js +1 -1
  160. package/assets/js/components/video-card/video-card.component.min.js +9 -9
  161. package/assets/js/components/video-card/video-card.component.min.js.map +1 -1
  162. package/assets/js/components/video-modal/video-modal.component.min.js +5 -5
  163. package/assets/js/components/word-count/word-count.component.min.js +1 -1
  164. package/assets/js/modules/card.module.js +12 -11
  165. package/assets/js/modules/content.js +40 -8
  166. package/assets/js/modules/content.test.js +62 -12
  167. package/assets/js/modules/data-layer.js +7 -6
  168. package/assets/js/modules/dropdown.js +0 -1
  169. package/assets/js/modules/form.js +129 -0
  170. package/assets/js/modules/form.test.js +132 -0
  171. package/assets/js/modules/nav.js +10 -3
  172. package/assets/js/modules/search.js +153 -0
  173. package/assets/js/modules/search.test.js +125 -0
  174. package/assets/js/modules/tabs.test.js +64 -12
  175. package/assets/js/modules/test-dom.js +5 -0
  176. package/assets/js/modules/testimonial.test.js +44 -6
  177. package/assets/js/modules/videos.test.js +61 -13
  178. package/assets/js/scripts.bundle.js +3 -3
  179. package/assets/js/scripts.bundle.js.map +1 -1
  180. package/assets/js/scripts.bundle.min.js +2 -2
  181. package/assets/js/scripts.bundle.min.js.map +1 -1
  182. package/assets/sass/_components.scss +2 -63
  183. package/assets/sass/_utilities.scss +1 -0
  184. package/assets/sass/components/banner.preload.scss +26 -0
  185. package/assets/sass/components/card.component.scss +1 -7
  186. package/assets/sass/components/card.module.scss +6 -6
  187. package/assets/sass/components/card.preload.scss +80 -0
  188. package/assets/sass/components/carousel.component.scss +165 -0
  189. package/assets/sass/components/carousel.config.scss +90 -249
  190. package/assets/sass/components/content.component.scss +0 -7
  191. package/assets/sass/components/modal.component.scss +5 -1
  192. package/assets/sass/components/nav.component.scss +2 -1
  193. package/assets/sass/components/nav.global.scss +0 -10
  194. package/assets/sass/components/notification.global.scss +8 -0
  195. package/assets/sass/components/search.component.scss +89 -7
  196. package/assets/sass/components/skeleton.global.scss +4 -0
  197. package/assets/sass/elements/dialog.scss +43 -0
  198. package/assets/sass/elements/dropdown.css +2 -0
  199. package/assets/sass/elements/forms.scss +0 -27
  200. package/assets/sass/elements/links--global.scss +40 -2
  201. package/assets/sass/foundations/colours.scss +0 -24
  202. package/assets/sass/foundations/reboot.scss +4 -0
  203. package/assets/sass/foundations/root.scss +0 -1
  204. package/assets/sass/utilities/js-display.css +2 -3
  205. package/assets/sass/utilities/wordpress.css +7 -0
  206. package/assets/ts/components/card/card.component.ts +72 -62
  207. package/assets/ts/components/carousel/carousel.component.ts +84 -19
  208. package/assets/ts/components/content/content.component.ts +36 -100
  209. package/assets/ts/components/form/form.component.ts +54 -213
  210. package/assets/ts/components/modal/modal.component.ts +27 -19
  211. package/assets/ts/components/nav/nav.component.ts +107 -95
  212. package/assets/ts/components/search/search.component.ts +260 -184
  213. package/assets/ts/components/std-nav/std-nav.component.ts +20 -17
  214. package/assets/ts/html.d.ts +6 -0
  215. package/assets/ts/modules/card.module.ts +19 -11
  216. package/assets/ts/modules/content.test.ts +84 -12
  217. package/assets/ts/modules/content.ts +56 -9
  218. package/assets/ts/modules/data-layer.ts +7 -11
  219. package/assets/ts/modules/dropdown.ts +0 -2
  220. package/assets/ts/modules/form.test.ts +183 -0
  221. package/assets/ts/modules/form.ts +210 -0
  222. package/assets/ts/modules/nav.ts +12 -3
  223. package/assets/ts/modules/search.test.ts +142 -0
  224. package/assets/ts/modules/search.ts +206 -0
  225. package/assets/ts/modules/tabs.test.ts +79 -12
  226. package/assets/ts/modules/test-dom.ts +5 -0
  227. package/assets/ts/modules/testimonial.test.ts +45 -6
  228. package/assets/ts/modules/videos.test.ts +74 -14
  229. package/dist/components.es.js +25 -25
  230. package/dist/components.umd.js +170 -163
  231. package/package.json +1 -1
  232. package/assets/js/modules/carousel.js +0 -214
  233. package/assets/js/modules/carousel.test.js +0 -18
  234. package/assets/ts/modules/carousel.test.ts +0 -27
  235. package/assets/ts/modules/carousel.ts +0 -301
@@ -1,23 +1,12 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { trackComponent, trackComponentRegistered } from '../_global';
1
+ import { trackComponent } from '../_global';
11
2
  import { cardHTML, setupCard } from '../../modules/card.module';
12
3
  import iamMenu from '../menu/menu.component';
13
- trackComponentRegistered('iam-card');
4
+ const getAssetLocation = () => document.body.getAttribute('data-assets-location') || '/assets';
14
5
  class iamCard extends HTMLElement {
15
6
  constructor() {
16
7
  super();
17
- this.attachShadow({ mode: 'open' });
18
- const assetLocation = document.body.hasAttribute('data-assets-location')
19
- ? document.body.getAttribute('data-assets-location')
20
- : '/assets';
8
+ const shadowRoot = this.attachShadow({ mode: 'open' });
9
+ const assetLocation = getAssetLocation();
21
10
  const loadCSS = `@import "${assetLocation}/css/components/card.component.css";`;
22
11
  const template = document.createElement('template');
23
12
  template.innerHTML = `
@@ -30,143 +19,143 @@ class iamCard extends HTMLElement {
30
19
  <slot name="link"></slot>
31
20
  <slot name="primary-action"></slot>
32
21
  `;
33
- this.shadowRoot.appendChild(template.content.cloneNode(true));
22
+ shadowRoot.appendChild(template.content.cloneNode(true));
34
23
  }
35
24
  connectedCallback() {
36
- return __awaiter(this, void 0, void 0, function* () {
37
- var _a, _b;
38
- // eslint-disable-next-line @typescript-eslint/no-this-alias
39
- const cardComponent = this;
40
- const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
41
- const assetLocation = document.body.hasAttribute('data-assets-location')
42
- ? document.body.getAttribute('data-assets-location')
43
- : '/assets';
44
- if (!window.customElements.get(`iam-menu`))
45
- window.customElements.define(`iam-menu`, iamMenu);
46
- setupCard(cardComponent);
47
- // Add Illustration HTML
48
- if (cardComponent.hasAttribute('data-illustration')) {
49
- cardBody.insertAdjacentHTML('afterbegin', `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`);
50
- }
51
- // Add class that shows the right arrow icon
52
- if (!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]') && !cardComponent.classList.contains('card--article') && !cardComponent.closest('.carousel--article-cards')) {
53
- cardComponent.classList.add('show-icon');
54
- }
55
- // Secondary buttons and actions
56
- // Add the dialog wrapper HTML
57
- if (cardComponent.querySelector('[slot="btns"]')) {
58
- cardComponent.shadowRoot.innerHTML += `<div class="menu__wrapper">
25
+ const shadowRoot = this.shadowRoot;
26
+ const cardBody = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector('.card__body');
27
+ if (!shadowRoot)
28
+ return;
29
+ if (!window.customElements.get(`iam-menu`))
30
+ window.customElements.define(`iam-menu`, iamMenu);
31
+ setupCard(this);
32
+ // Add Illustration HTML
33
+ if (this.hasAttribute('data-illustration')) {
34
+ cardBody === null || cardBody === void 0 ? void 0 : cardBody.insertAdjacentHTML('afterbegin', `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`);
35
+ }
36
+ // Add class that shows the right arrow icon
37
+ if (!this.querySelector('[slot="btns"]') && !this.querySelector('[slot="secondary"]') && !this.classList.contains('card--article') && !this.closest('.carousel--article-cards')) {
38
+ this.classList.add('show-icon');
39
+ }
40
+ // Secondary buttons and actions
41
+ // Add the dialog wrapper HTML
42
+ if (this.querySelector('[slot="btns"]')) {
43
+ const menuTemplate = document.createElement('template');
44
+ menuTemplate.innerHTML = `<div class="menu__wrapper">
59
45
  <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
60
46
  <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
61
47
  <slot name="btns"></slot>
62
48
  </iam-menu>
63
49
  </div>`;
64
- // safari and firefox anchor fix for cards
65
- if (!CSS.supports('top', 'anchor(top)')) {
66
- const actionButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popovertarget="actions"]');
67
- const actionPopover = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[popover]');
68
- actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', (event) => {
69
- this.style.setProperty('overflow', 'visible');
70
- this.style.setProperty('z-index', '999999');
71
- const viewportOffset = actionButton.getBoundingClientRect();
72
- const top = viewportOffset.top;
73
- const left = viewportOffset.left;
74
- actionPopover.style.setProperty('display', 'block');
75
- actionPopover.style.setProperty('top', top + 'px');
76
- actionPopover.style.setProperty('left', left - 100 + 'px');
77
- });
78
- document.addEventListener('scroll', (event) => {
79
- actionPopover.style.setProperty('display', 'none');
80
- });
81
- }
82
- }
83
- // Make sure slotted buttons and links have correct button classes
84
- Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
85
- button.classList.add('btn');
86
- button.classList.add('btn-action');
87
- });
88
- // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button
89
- if (cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')) {
90
- const element = cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]');
91
- element.addEventListener('mouseenter', () => {
92
- cardComponent.classList.add('prevent-hover');
93
- });
94
- element.addEventListener('mouseleave', () => {
95
- cardComponent.classList.remove('prevent-hover');
96
- });
97
- }
98
- if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {
99
- const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');
100
- element.addEventListener('mouseenter', () => {
101
- cardComponent.classList.add('prevent-hover');
50
+ shadowRoot.appendChild(menuTemplate.content.cloneNode(true));
51
+ // safari and firefox anchor fix for cards
52
+ if (typeof CSS === 'undefined' || !CSS.supports('top', 'anchor(top)')) {
53
+ const actionButton = shadowRoot.querySelector('[popovertarget="actions"]');
54
+ const actionPopover = shadowRoot.querySelector('[popover]');
55
+ actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', () => {
56
+ this.style.setProperty('overflow', 'visible');
57
+ this.style.setProperty('z-index', '999999');
58
+ const viewportOffset = actionButton.getBoundingClientRect();
59
+ const top = viewportOffset.top;
60
+ const left = viewportOffset.left;
61
+ actionPopover === null || actionPopover === void 0 ? void 0 : actionPopover.style.setProperty('display', 'block');
62
+ actionPopover === null || actionPopover === void 0 ? void 0 : actionPopover.style.setProperty('top', top + 'px');
63
+ actionPopover === null || actionPopover === void 0 ? void 0 : actionPopover.style.setProperty('left', left - 100 + 'px');
102
64
  });
103
- element.addEventListener('mouseleave', () => {
104
- cardComponent.classList.remove('prevent-hover');
65
+ document.addEventListener('scroll', () => {
66
+ actionPopover === null || actionPopover === void 0 ? void 0 : actionPopover.style.setProperty('display', 'none');
105
67
  });
106
68
  }
107
- // Dispatch events of selecting checkboxes
108
- const checkbox = cardComponent.querySelector('input[type="checkbox"]');
109
- if (checkbox) {
110
- checkbox.addEventListener('change', () => {
111
- if (checkbox.checked) {
112
- const customEvent = new CustomEvent('select-card', {
113
- detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
114
- });
115
- cardComponent.dispatchEvent(customEvent);
116
- }
117
- else {
118
- const customEvent = new CustomEvent('unselect-card', {
119
- detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
120
- });
121
- cardComponent.dispatchEvent(customEvent);
122
- }
123
- });
124
- }
125
- // Dispatch events of click onto secondary buttons
126
- const secondaryBtn = cardComponent.querySelector('[slot="secondary"]');
127
- if (secondaryBtn) {
128
- secondaryBtn.addEventListener('click', () => {
129
- const customEvent = new CustomEvent('secondary-button-clicked', {
130
- detail: { Title: secondaryBtn.getAttribute('title') },
69
+ }
70
+ // Make sure slotted buttons and links have correct button classes
71
+ this.querySelectorAll('[slot="btns"]').forEach((button) => {
72
+ button.classList.add('btn');
73
+ button.classList.add('btn-action');
74
+ });
75
+ // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button
76
+ const preventHoverElement = this.querySelector('[slot="checkbox"],[slot="secondary"]');
77
+ if (preventHoverElement) {
78
+ preventHoverElement.addEventListener('mouseenter', () => {
79
+ this.classList.add('prevent-hover');
80
+ });
81
+ preventHoverElement.addEventListener('mouseleave', () => {
82
+ this.classList.remove('prevent-hover');
83
+ });
84
+ }
85
+ const menuWrapper = shadowRoot.querySelector('.menu__wrapper');
86
+ if (menuWrapper) {
87
+ menuWrapper.addEventListener('mouseenter', () => {
88
+ this.classList.add('prevent-hover');
89
+ });
90
+ menuWrapper.addEventListener('mouseleave', () => {
91
+ this.classList.remove('prevent-hover');
92
+ });
93
+ }
94
+ // Dispatch events of selecting checkboxes
95
+ const checkbox = this.querySelector('input[type="checkbox"]');
96
+ if (checkbox) {
97
+ checkbox.addEventListener('change', () => {
98
+ if (checkbox.checked) {
99
+ const customEvent = new CustomEvent('select-card', {
100
+ detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
131
101
  });
132
- cardComponent.dispatchEvent(customEvent);
133
- });
134
- }
135
- // Dispatch events of click onto action buttons
136
- const actionBtns = cardComponent.querySelectorAll('[slot="btns"]');
137
- Array.from(actionBtns).forEach((button) => {
138
- button.addEventListener('click', () => {
139
- const customEvent = new CustomEvent('action-button-clicked', {
140
- detail: { Title: button.getAttribute('title') },
102
+ this.dispatchEvent(customEvent);
103
+ }
104
+ else {
105
+ const customEvent = new CustomEvent('unselect-card', {
106
+ detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
141
107
  });
142
- cardComponent.dispatchEvent(customEvent);
108
+ this.dispatchEvent(customEvent);
109
+ }
110
+ });
111
+ }
112
+ // Dispatch events of click onto secondary buttons
113
+ const secondaryBtn = this.querySelector('[slot="secondary"]');
114
+ if (secondaryBtn) {
115
+ secondaryBtn.addEventListener('click', () => {
116
+ const customEvent = new CustomEvent('secondary-button-clicked', {
117
+ detail: { Title: secondaryBtn.getAttribute('title') },
118
+ });
119
+ this.dispatchEvent(customEvent);
120
+ });
121
+ }
122
+ // Dispatch events of click onto action buttons
123
+ this.querySelectorAll('[slot="btns"]').forEach((button) => {
124
+ button.addEventListener('click', () => {
125
+ const customEvent = new CustomEvent('action-button-clicked', {
126
+ detail: { Title: button.getAttribute('title') },
143
127
  });
128
+ this.dispatchEvent(customEvent);
144
129
  });
145
- if (this.querySelector('[slot="link"]'))
146
- this.classList.add('hasLink');
147
- trackComponent(cardComponent, 'iam-card', [
148
- 'select-card',
149
- 'unselect-card',
150
- 'secondary-button-clicked',
151
- 'action-button-clicked',
152
- ]);
153
130
  });
131
+ if (this.querySelector('[slot="link"]'))
132
+ this.classList.add('hasLink');
133
+ trackComponent(this, 'iam-card', [
134
+ 'select-card',
135
+ 'unselect-card',
136
+ 'secondary-button-clicked',
137
+ 'action-button-clicked',
138
+ ]);
154
139
  }
155
140
  static get observedAttributes() {
156
141
  return ['data-image'];
157
142
  }
158
143
  attributeChangedCallback(attrName, oldVal, newVal) {
144
+ const shadowRoot = this.shadowRoot;
145
+ if (!shadowRoot)
146
+ return;
159
147
  switch (attrName) {
160
148
  case 'data-total': {
161
- if (this.shadowRoot.querySelector('.card__total'))
162
- this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
149
+ const cardTotal = shadowRoot.querySelector('.card__total');
150
+ if (cardTotal)
151
+ cardTotal.innerHTML = newVal || '';
163
152
  break;
164
153
  }
165
154
  case 'data-image': {
166
155
  if (oldVal != newVal) {
167
- const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
156
+ const cardHeadImg = shadowRoot.querySelector('.card__head img');
168
157
  if (cardHeadImg)
169
- cardHeadImg.setAttribute('src', newVal);
158
+ cardHeadImg.setAttribute('src', newVal || '');
170
159
  }
171
160
  break;
172
161
  }
@@ -1,7 +1,7 @@
1
1
  /*!
2
- * iamKey v7.8.2--beta3
2
+ * iamKey v7.8.2--beta5
3
3
  * Copyright 2022-2026 iamproperty
4
- */const b=d=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:d})},h=(d,a,r)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:a}),r.forEach(e=>{d.addEventListener(e,function(c){const s={event:e,element:a,target:c.target};Object.keys(c.detail).forEach(p=>{const o=c.detail[p];s[p]=o}),window.dataLayer.push(s)})}),!0),u=`<div class="wrapper">
4
+ */const b=(l,r,o)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:r}),o.forEach(a=>{l.addEventListener(a,function(n){const d={event:a,element:r,target:n.target};Object.keys(n.detail).forEach(p=>{const t=n.detail[p];d[p]=t}),window.dataLayer.push(d)})}),!0),u=`<div class="wrapper">
5
5
  <div class="card__head" part="head">
6
6
  <slot name="head"></slot>
7
7
  </div>
@@ -17,27 +17,27 @@
17
17
  <div class="card__footer" part="footer">
18
18
  <slot name="footer"></slot>
19
19
  </div>
20
- </div>`,v=d=>{d.classList.add("card");const a=d.shadowRoot.querySelector(".card__head"),r=d.shadowRoot.querySelector(".card__body");if(d.hasAttribute("data-image")&&(a.innerHTML+=`<img src="${d.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),d.hasAttribute("data-total"))if(!r?.querySelector(".card__total"))r.insertAdjacentHTML("beforeend",`<div class="card__total">${d.getAttribute("data-total")}</div>`);else{const e=r?.querySelector(".card__total");e&&(e.innerHTML=d.getAttribute("data-total"))}else d.querySelector('[slot="total-icon"]')&&r.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>');d.querySelector('[slot="badges"]')?d.shadowRoot.querySelector(".card__badges").classList.remove("empty"):d.shadowRoot.querySelector(".card__badges").classList.add("empty")};class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
20
+ </div>`,g=(l,r)=>{var o;return((o=l.shadowRoot)===null||o===void 0?void 0:o.querySelector(r))||null},v=l=>{l.classList.add("card");const r=g(l,".card__head"),o=g(l,".card__body"),a=g(l,".card__badges");if(l.hasAttribute("data-image")&&r?.insertAdjacentHTML("beforeend",`<img src="${l.getAttribute("data-image")||""}" alt="" loading="lazy" part="image" />`),l.hasAttribute("data-total")){const n=o?.querySelector(".card__total");n?n.innerHTML=l.getAttribute("data-total")||"":o.insertAdjacentHTML("beforeend",`<div class="card__total">${l.getAttribute("data-total")||""}</div>`)}else l.querySelector('[slot="total-icon"]')&&o?.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>');l.querySelector('[slot="badges"]')?a?.classList.remove("empty"):a?.classList.add("empty")};class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const r=document.createElement("template");r.innerHTML=`
21
21
  <style>
22
22
  *,*::before,*::after{box-sizing:border-box}:host{inset:auto;top:anchor(bottom) !important;left:anchor(left) !important;position:fixed;position-try-fallbacks:flip-block,flip-inline;width:max-content !important;min-width:max-content !important;max-width:max-content !important;height:min-content;max-height:var(--menu-max-height, min(100vh - 6rem));overflow:auto;border:none !important}:host(.menu--fill){width:anchor-size(width) !important;min-width:anchor-size(width) !important;max-width:anchor-size(width) !important}:host(:popover-open),:host([popover-open]){display:block}:host(:not([popover])){position:static;display:block}:host(.menu--sm){width:10rem;min-width:10rem !important;max-width:10rem !important}:host(.menu--md){width:15rem;min-width:15rem !important;max-width:15rem !important}:host(.menu--lg){width:20rem;min-width:20rem !important;max-width:20rem !important}:host(.menu--height-sm){max-height:12.5rem}:host(.menu--height-lg){max-height:25rem}::slotted(*:is(button,a,label,span,iam-button)){background:unset !important;border:unset !important;color:var(--colour-primary) !important;font-weight:inherit !important;font-family:inherit !important;font-size:1rem !important;line-height:1.1875rem !important;display:block !important;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding-block:var(--menu-item-padding, 0.5rem) !important;width:var(--menu-item-width, 100%) !important;max-width:var(--menu-item-width, 100%) !important;text-align:var(--menu-item-text-align, left) !important}::slotted(*:is(button,a,label,iam-button)){padding-inline:var(--menu-item-padding, 0.5rem);cursor:var(--menu-item-cursor, pointer) !important}::slotted(*:is(span):first-child){padding-top:0 !important;font-weight:700 !important}::slotted(*:is(button,a,label,span,iam-button):last-child){margin-bottom:0 !important}::slotted(*:is(label)){--radio-size: 1.25rem;--radio-inner-size: 0.75rem;--radio-inner-top: 0.75rem;--radio-inner-left: 0.75rem;--checkbox-tick-size: 0.75rem;--checkbox-inner-size: 0.625rem;--checkbox-inner-top: 0.375rem;--checkbox-inner-left: 0.5rem;padding-left:2.25rem}::slotted(*:is(button,a,label):is(.selected)){background:#e9f8fc !important;border-left:4px solid var(--colour-info) !important;border-radius:.25rem !important;padding-left:calc(var(--menu-item-padding, 0.5rem) - 4px) !important}@media(prefers-color-scheme: dark){::slotted(*:is(button,a,label):is(.selected):not(:hover,.hover)){color:#000 !important}}::slotted(*:is(button,a,label,iam-button):is(:hover,.hover,:focus,.focus)){background:var(--colour-light) !important;border-radius:.25rem !important}::slotted(*:is(button,a,label,iam-button):is(:active,.active)){background:#e0e0e0 !important;border-radius:.25rem !important}@media(prefers-color-scheme: dark){::slotted(*:is(button,a,label):is(:active,.active)){color:#000 !important}}::slotted(hr){height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}::slotted(iam-menu:not([popover])){border:none !important;border-radius:0 !important;box-shadow:none !important;padding:0;margin:0;width:auto}::slotted(iam-menu[popover]){top:anchor(top) !important;left:calc(anchor(right) + 1rem) !important}/*# sourceMappingURL=assets/css/components/menu.component.css.map */
23
23
 
24
24
  </style>
25
25
  <div class="menu--inner" part="inner">
26
26
  <slot></slot>
27
- </div>`,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){this.classList.add("dropdown");const a=this.hasAttribute("id")?this.getAttribute("id"):!1,r=document.querySelector(`[popovertarget="${a}"]`);let e=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),c=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(c=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),e=c),this.querySelectorAll("details");let s,p;a&&r&&(this.setAttribute("role","menu"),this.setAttribute("popover","auto"),this.style["position-anchor"]=`--${a}`,r?.setAttribute("aria-haspopup","true"),r==null||(r.style["anchor-name"]=`--${a}`),r?.setAttribute("aria-controls",a)),c.forEach((o,t)=>{o.setAttribute("role","menuitem"),o.setAttribute("tabindex","0"),t==0&&o.setAttribute("autofocus",!0)}),this.addEventListener("keydown",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("a, button, summary")){const t=document.activeElement,n=Array.from(e).indexOf(t)-1,l=Array.from(e).indexOf(t)+1;switch(o.keyCode){case 27:t.closest("details")?(o.stopPropagation(),o.preventDefault(),t.closest("details").removeAttribute("open"),t.closest("details").querySelector(":scope summary").focus()):(o.stopPropagation(),r.focus());break;case 32:case 13:break;case 35:o.stopPropagation(),o.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(c)[c.length-1].focus();break;case 36:o.stopPropagation(),o.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(c)[0].focus();break;case 38:if(o.stopPropagation(),o.preventDefault(),Array.from(e).indexOf(t)>-1)Array.from(e)[n]!=null?Array.from(e)[n].focus():Array.from(e)[e.length-1].focus();else if(t.closest("details")){const i=t.closest("details").querySelectorAll("a, button, :scope details > summary");p=Array.from(i).indexOf(t)-1,Array.from(i)[p]!=null?Array.from(i)[p].focus():Array.from(i)[i.length-1].focus()}break;case 40:if(o.stopPropagation(),o.preventDefault(),Array.from(e).indexOf(t)>-1)Array.from(e)[l]!=null?Array.from(e)[l].focus():Array.from(e)[0].focus();else if(t.closest("details")){const i=t.closest("details").querySelectorAll("a, button, :scope details > summary");s=Array.from(i).indexOf(t)+1,Array.from(i)[s]!=null?Array.from(i)[s].focus():Array.from(i)[0].focus()}break}}}),this.addEventListener("toggle",o=>{var t,n,l,i;const m=new CustomEvent(o.newState,{detail:{id:this.getAttribute("id"),target:o.target}});this.dispatchEvent(m),this.closest(".menu__wrapper")&&c[0].focus(),this.hasAttribute("popover-open")&&(o.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((t=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||t===void 0||t.setAttribute("aria-pressed","true"),(n=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||n===void 0||n.classList.add("active")):((l=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||l===void 0||l.removeAttribute("aria-pressed"),(i=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||i===void 0||i.classList.remove("active"))}),this.addEventListener("click",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("button:has(+ iam-menu:not([popover]))")){const t=o.target.closest("button:has(+ iam-menu)");t?.classList.toggle("open")}else if(o&&o.target instanceof HTMLElement&&o.target.closest("button.selectable")){const t=o.target.closest("button.selectable");this.hasAttribute("multiple")?t.classList.toggle("selected"):t?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(n=>{n.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(n=>{n.classList.remove("selected")}),t.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",o=>{if(o.originalTarget&&o.originalTarget.matches("[popovertarget]")){const t=o.originalTarget,n=t.getAttribute("popovertarget"),l=document.getElementById(n),i=t.getBoundingClientRect(),m=i.top,g=i.left;l.style.setProperty("top",m+"px"),l.style.setProperty("left",g+t.clientWidth+"px")}})}}var w=function(d,a,r,e){function c(s){return s instanceof r?s:new r(function(p){p(s)})}return new(r||(r=Promise))(function(s,p){function o(l){try{n(e.next(l))}catch(i){p(i)}}function t(l){try{n(e.throw(l))}catch(i){p(i)}}function n(l){l.done?s(l.value):c(l.value).then(o,t)}n((e=e.apply(d,a||[])).next())})};b("iam-card");class y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
27
+ </div>`,this.shadowRoot.appendChild(r.content.cloneNode(!0))}connectedCallback(){this.classList.add("dropdown");const r=this.hasAttribute("id")?this.getAttribute("id"):!1,o=document.querySelector(`[popovertarget="${r}"]`);let a=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),n=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(n=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),a=n),this.querySelectorAll("details");let d,p;r&&o&&(this.setAttribute("role","menu"),this.setAttribute("popover","auto"),this.style["position-anchor"]=`--${r}`,o?.setAttribute("aria-haspopup","true"),o==null||(o.style["anchor-name"]=`--${r}`),o?.setAttribute("aria-controls",r)),n.forEach((t,e)=>{t.setAttribute("role","menuitem"),t.setAttribute("tabindex","0"),e==0&&t.setAttribute("autofocus",!0)}),this.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("a, button, summary")){const e=document.activeElement,i=Array.from(a).indexOf(e)-1,c=Array.from(a).indexOf(e)+1;switch(t.keyCode){case 27:e.closest("details")?(t.stopPropagation(),t.preventDefault(),e.closest("details").removeAttribute("open"),e.closest("details").querySelector(":scope summary").focus()):(t.stopPropagation(),o.focus());break;case 32:case 13:break;case 35:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(n)[n.length-1].focus();break;case 36:t.stopPropagation(),t.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(n)[0].focus();break;case 38:if(t.stopPropagation(),t.preventDefault(),Array.from(a).indexOf(e)>-1)Array.from(a)[i]!=null?Array.from(a)[i].focus():Array.from(a)[a.length-1].focus();else if(e.closest("details")){const s=e.closest("details").querySelectorAll("a, button, :scope details > summary");p=Array.from(s).indexOf(e)-1,Array.from(s)[p]!=null?Array.from(s)[p].focus():Array.from(s)[s.length-1].focus()}break;case 40:if(t.stopPropagation(),t.preventDefault(),Array.from(a).indexOf(e)>-1)Array.from(a)[c]!=null?Array.from(a)[c].focus():Array.from(a)[0].focus();else if(e.closest("details")){const s=e.closest("details").querySelectorAll("a, button, :scope details > summary");d=Array.from(s).indexOf(e)+1,Array.from(s)[d]!=null?Array.from(s)[d].focus():Array.from(s)[0].focus()}break}}}),this.addEventListener("toggle",t=>{var e,i,c,s;const m=new CustomEvent(t.newState,{detail:{id:this.getAttribute("id"),target:t.target}});this.dispatchEvent(m),this.closest(".menu__wrapper")&&n[0].focus(),this.hasAttribute("popover-open")&&(t.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((e=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||e===void 0||e.setAttribute("aria-pressed","true"),(i=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||i===void 0||i.classList.add("active")):((c=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||c===void 0||c.removeAttribute("aria-pressed"),(s=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||s===void 0||s.classList.remove("active"))}),this.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button:has(+ iam-menu:not([popover]))")){const e=t.target.closest("button:has(+ iam-menu)");e?.classList.toggle("open")}else if(t&&t.target instanceof HTMLElement&&t.target.closest("button.selectable")){const e=t.target.closest("button.selectable");this.hasAttribute("multiple")?e.classList.toggle("selected"):e?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(i=>{i.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(i=>{i.classList.remove("selected")}),e.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",t=>{if(t.originalTarget&&t.originalTarget.matches("[popovertarget]")){const e=t.originalTarget,i=e.getAttribute("popovertarget"),c=document.getElementById(i),s=e.getBoundingClientRect(),m=s.top,h=s.left;c.style.setProperty("top",m+"px"),c.style.setProperty("left",h+e.clientWidth+"px")}})}}const w=()=>document.body.getAttribute("data-assets-location")||"/assets";class y extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"});w();const o=document.createElement("template");o.innerHTML=`
28
28
  <style>
29
29
  ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
30
30
 
31
- :host{position:relative;border-radius:var(--card-border-radius);margin-bottom:2rem;display:block;outline:var(--card-outline);outline-offset:-2px}.wrapper{border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);position:relative;font-weight:bold;font-size:var(--card-fs);line-height:var(--card-lh);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}.wrapper>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__head:has(img):after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--card-head-overlay)}.card__body{padding:var(--card-body-top-padding) var(--card-right-padding) var(--card-body-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:auto;padding:var(--card-footer-top-padding, 0) var(--card-right-padding) var(--card-footer-bottom-padding, 0) var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge,.title)){display:block !important;font-weight:normal !important;font-size:var(--card-body-fs, 1rem) !important;line-height:var(--card-body-lh, inherit) !important;overflow-x:clip;text-overflow:ellipsis}::slotted(small){padding-top:var(--card-gap, 1rem) !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge,.title):not([class*=pt-])){padding-top:var(--card-gap, 1.5rem) !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 7 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:right;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) var(--card-badges-bottom-padding, 0) var(--card-left-padding);margin-bottom:-1.5rem}.card__head:not(:has(img))~.card__badges{text-align:end}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--dialog-padding: 0.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);font-size:1rem;background:var(--dropdown-bg);margin-block:var(--dropdown-margin-block);padding:var(--dialog-padding);border-radius:var(--dropdown-border-radius);box-shadow:var(--dropdown-box-shadow)}dialog>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog[open]:has(iam-modal){--modal-inner-dialog-display: contents;place-self:center}@media(prefers-color-scheme: light){dialog[open]:has(iam-modal){color-scheme:light;--colour-body: #595959;--colour-heading: var(--colour-primary-theme)}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(bottom) !important;left:anchor(left) !important;position-try-fallbacks:flip-block,flip-inline !important;margin:0 0 0 .25rem;padding:.5rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:10rem !important;max-width:15rem !important;padding:var(--menu-padding, 0.5rem);margin:0;background:var(--menu-bg, canvas);border:var(--menu-border, 2px solid grey);overflow:auto;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1)}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:.375rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{background:unset;border:unset;color:var(--colour-primary);font-weight:inherit;font-family:inherit;font-size:1rem;line-height:1.1875rem;display:block;margin:var(--menu-item-margin, 0 0 0.25rem 0);padding-block:var(--menu-item-padding, 0.5rem);width:var(--menu-item-width, 100%);max-width:var(--menu-item-width, 100%);text-align:var(--menu-item-text-align, left)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:hover,:focus){background:var(--colour-light) !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:active){background:#e0e0e0 !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}}@layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:var(--fa-family-classic);margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:var(--fa-family-classic)}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:var(--fa-family-classic);margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:var(--fa-family-classic)}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):not(.no-icon):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide, 0.5rem)}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon){--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";display:var(--card-right-arrow-display, block);position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--card-icon-bg);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--card-icon-colour);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__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.menu__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.menu__wrapper>.btn:before{content:"\uF142";font-family:var(--fa-family-classic)}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){outline:2px solid var(--hover-outline-colour);outline-offset:-2px;border-radius:var(--card-border-radius) !important}:host(.hasLink) slot[name=link]{position:absolute;display:block;inset:0;z-index:1}::slotted([slot=link]){position:absolute !important;display:block !important;inset:0 !important;z-index:1 !important;margin:0 !important;text-indent:-300% !important;overflow:hidden !important}::slotted([slot=link]):after{display:none !important}:host(.card--article){--card-head-height: 5rem;--card-fs: 1rem;--card-gap: 0.5rem;--card-body-top-padding: 1rem;--card-body-bottom-padding: 0.5rem;--card-left-padding: 0.5rem;--card-right-padding: 0.75rem;--card-right-arrow-display: none;--card-body-fs: 0.6875rem;--card-body-lh: 1rem;--card-footer-bottom-padding: 0.5rem;--card-badges-top-padding:0.5rem;--card-badges-bottom-padding: 0;--card-right-padding: 0.5rem;--card-left-padding: 0.5rem}::slotted(span:is(.duration):not([class*=pt-])){font-size:var(--card-fs) !important;line-height:var(--card-lh) !important;padding-top:0 !important}::slotted(span:is(.duration):not([class*=pt-])):before{content:"\uF017";font-family:var(--fa-family-classic);color:var(--colour-warning);padding-right:.25rem}/*# sourceMappingURL=assets/css/components/card.component.css.map */
31
+ :host{position:relative;border-radius:var(--card-border-radius);margin-bottom:2rem;display:block}.wrapper{border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);position:relative;font-weight:bold;font-size:var(--card-fs);line-height:var(--card-lh);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}.wrapper>*{width:100%;box-sizing:border-box}:host([class*=colour-]) .wrapper{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__head:has(img):after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--card-head-overlay)}.card__body{padding:var(--card-body-top-padding) var(--card-right-padding) var(--card-body-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:auto;padding:var(--card-footer-top-padding, 0) var(--card-right-padding) var(--card-footer-bottom-padding, 0) var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge,.title)){display:block !important;font-weight:normal !important;font-size:var(--card-body-fs, 1rem) !important;line-height:var(--card-body-lh, inherit) !important;overflow-x:clip;text-overflow:ellipsis}::slotted(small){padding-top:var(--card-gap, 1rem) !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge,.title):not([class*=pt-])){padding-top:var(--card-gap, 1.5rem) !important}::slotted(:is(a,button)[slot=footer]:not([class*=mb-])){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 7 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:right;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) var(--card-badges-bottom-padding, 0) var(--card-left-padding);margin-bottom:-1.5rem}.card__head:not(:has(img))~.card__badges{text-align:end}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--dialog-padding: 0.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);font-size:1rem;background:var(--dropdown-bg);margin-block:var(--dropdown-margin-block);padding:var(--dialog-padding);border-radius:var(--dropdown-border-radius);box-shadow:var(--dropdown-box-shadow)}dialog>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog[open]:has(iam-modal){--modal-inner-dialog-display: contents;place-self:center}@media(prefers-color-scheme: light){dialog[open]:has(iam-modal){color-scheme:light;--colour-body: #595959;--colour-heading: var(--colour-primary-theme)}}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open]:has(.modal--sm){min-width:20.9375rem;width:20.9375rem;max-width:20.9375rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open]:has(.modal--sm){min-width:28.375rem;width:28.375rem;max-width:28.375rem}}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open]:has(.modal--lg){min-width:42.875rem;width:42.875rem;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open]:has(.modal--lg){min-width:46rem;width:46rem;max-width:46rem}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(bottom) !important;left:anchor(left) !important;position-try-fallbacks:flip-block,flip-inline !important;margin:0 0 0 .25rem;padding:.5rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:10rem !important;max-width:15rem !important;padding:var(--menu-padding, 0.5rem);margin:0;background:var(--menu-bg, canvas);border:var(--menu-border, 2px solid grey);overflow:auto;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1)}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:.375rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{background:unset;border:unset;color:var(--colour-primary);font-weight:inherit;font-family:inherit;font-size:1rem;line-height:1.1875rem;display:block;margin:var(--menu-item-margin, 0 0 0.25rem 0);padding-block:var(--menu-item-padding, 0.5rem);width:var(--menu-item-width, 100%);max-width:var(--menu-item-width, 100%);text-align:var(--menu-item-text-align, left)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:hover,:focus){background:var(--colour-light) !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:active){background:#e0e0e0 !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}}@layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:var(--fa-family-classic);margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:var(--fa-family-classic)}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:var(--fa-family-classic);margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:var(--fa-family-classic)}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):not(.no-icon):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon){--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";display:var(--card-right-arrow-display, block);position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--card-icon-bg);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--card-icon-colour);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__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.menu__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.menu__wrapper>.btn:before{content:"\uF142";font-family:var(--fa-family-classic)}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){outline:2px solid var(--hover-outline-colour);outline-offset:-2px;border-radius:var(--card-border-radius) !important}:host(.hasLink) slot[name=link]{position:absolute;display:block;inset:0;z-index:1}::slotted([slot=link]){position:absolute !important;display:block !important;inset:0 !important;z-index:1 !important;margin:0 !important;text-indent:-300% !important;overflow:hidden !important}::slotted([slot=link]):after{display:none !important}:host(.card--article){--card-head-height: 5rem;--card-fs: 1rem;--card-gap: 0.5rem;--card-body-top-padding: 1rem;--card-body-bottom-padding: 0.5rem;--card-left-padding: 0.5rem;--card-right-padding: 0.75rem;--card-right-arrow-display: none;--card-body-fs: 0.6875rem;--card-body-lh: 1rem;--card-footer-bottom-padding: 0.5rem!important;--card-badges-top-padding:0.5rem;--card-badges-bottom-padding: 0;--card-right-padding: 0.5rem;--card-left-padding: 0.5rem}::slotted(span:is(.duration):not([class*=pt-])){font-size:var(--card-fs) !important;line-height:var(--card-lh) !important;padding-top:0 !important}::slotted(span:is(.duration):not([class*=pt-])):before{content:"\uF017";font-family:var(--fa-family-classic);color:var(--colour-warning);padding-right:.25rem}/*# sourceMappingURL=assets/css/components/card.component.css.map */
32
32
 
33
33
  </style>
34
34
  ${u}
35
35
  <slot name="link"></slot>
36
36
  <slot name="primary-action"></slot>
37
- `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){return w(this,void 0,void 0,function*(){var a,r;const e=this,c=e.shadowRoot.querySelector(".card__body");if(document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location"),window.customElements.get("iam-menu")||window.customElements.define("iam-menu",f),v(e),e.hasAttribute("data-illustration")&&c.insertAdjacentHTML("afterbegin",`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`),!e.querySelector('[slot="btns"]')&&!e.querySelector('[slot="secondary"]')&&!e.classList.contains("card--article")&&!e.closest(".carousel--article-cards")&&e.classList.add("show-icon"),e.querySelector('[slot="btns"]')&&(e.shadowRoot.innerHTML+=`<div class="menu__wrapper">
37
+ `,r.appendChild(o.content.cloneNode(!0))}connectedCallback(){const r=this.shadowRoot,o=r?.querySelector(".card__body");if(!r)return;if(window.customElements.get("iam-menu")||window.customElements.define("iam-menu",f),v(this),this.hasAttribute("data-illustration")&&o?.insertAdjacentHTML("afterbegin",`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`),!this.querySelector('[slot="btns"]')&&!this.querySelector('[slot="secondary"]')&&!this.classList.contains("card--article")&&!this.closest(".carousel--article-cards")&&this.classList.add("show-icon"),this.querySelector('[slot="btns"]')){const t=document.createElement("template");if(t.innerHTML=`<div class="menu__wrapper">
38
38
  <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
39
39
  <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
40
40
  <slot name="btns"></slot>
41
41
  </iam-menu>
42
- </div>`,!CSS.supports("top","anchor(top)"))){const t=(a=this.shadowRoot)===null||a===void 0?void 0:a.querySelector('[popovertarget="actions"]'),n=(r=this.shadowRoot)===null||r===void 0?void 0:r.querySelector("[popover]");t?.addEventListener("click",l=>{this.style.setProperty("overflow","visible"),this.style.setProperty("z-index","999999");const i=t.getBoundingClientRect(),m=i.top,g=i.left;n.style.setProperty("display","block"),n.style.setProperty("top",m+"px"),n.style.setProperty("left",g-100+"px")}),document.addEventListener("scroll",l=>{n.style.setProperty("display","none")})}if(Array.from(e.querySelectorAll('[slot="btns"]')).forEach(t=>{t.classList.add("btn"),t.classList.add("btn-action")}),e.querySelector('[slot="checkbox"],[slot="secondary"]')){const t=e.querySelector('[slot="checkbox"],[slot="secondary"]');t.addEventListener("mouseenter",()=>{e.classList.add("prevent-hover")}),t.addEventListener("mouseleave",()=>{e.classList.remove("prevent-hover")})}if(e.shadowRoot.querySelector(".menu__wrapper")){const t=e.shadowRoot.querySelector(".menu__wrapper");t.addEventListener("mouseenter",()=>{e.classList.add("prevent-hover")}),t.addEventListener("mouseleave",()=>{e.classList.remove("prevent-hover")})}const s=e.querySelector('input[type="checkbox"]');s&&s.addEventListener("change",()=>{if(s.checked){const t=new CustomEvent("select-card",{detail:{"Card value":s.value,"input name":s.getAttribute("name")}});e.dispatchEvent(t)}else{const t=new CustomEvent("unselect-card",{detail:{"Card value":s.value,"input name":s.getAttribute("name")}});e.dispatchEvent(t)}});const p=e.querySelector('[slot="secondary"]');p&&p.addEventListener("click",()=>{const t=new CustomEvent("secondary-button-clicked",{detail:{Title:p.getAttribute("title")}});e.dispatchEvent(t)});const o=e.querySelectorAll('[slot="btns"]');Array.from(o).forEach(t=>{t.addEventListener("click",()=>{const n=new CustomEvent("action-button-clicked",{detail:{Title:t.getAttribute("title")}});e.dispatchEvent(n)})}),this.querySelector('[slot="link"]')&&this.classList.add("hasLink"),h(e,"iam-card",["select-card","unselect-card","secondary-button-clicked","action-button-clicked"])})}static get observedAttributes(){return["data-image"]}attributeChangedCallback(a,r,e){switch(a){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=e);break}case"data-image":{if(r!=e){const c=this.shadowRoot.querySelector(".card__head img");c&&c.setAttribute("src",e)}break}}}}export{y as default};
42
+ </div>`,r.appendChild(t.content.cloneNode(!0)),typeof CSS>"u"||!CSS.supports("top","anchor(top)")){const e=r.querySelector('[popovertarget="actions"]'),i=r.querySelector("[popover]");e?.addEventListener("click",()=>{this.style.setProperty("overflow","visible"),this.style.setProperty("z-index","999999");const c=e.getBoundingClientRect(),s=c.top,m=c.left;i?.style.setProperty("display","block"),i?.style.setProperty("top",s+"px"),i?.style.setProperty("left",m-100+"px")}),document.addEventListener("scroll",()=>{i?.style.setProperty("display","none")})}}this.querySelectorAll('[slot="btns"]').forEach(t=>{t.classList.add("btn"),t.classList.add("btn-action")});const a=this.querySelector('[slot="checkbox"],[slot="secondary"]');a&&(a.addEventListener("mouseenter",()=>{this.classList.add("prevent-hover")}),a.addEventListener("mouseleave",()=>{this.classList.remove("prevent-hover")}));const n=r.querySelector(".menu__wrapper");n&&(n.addEventListener("mouseenter",()=>{this.classList.add("prevent-hover")}),n.addEventListener("mouseleave",()=>{this.classList.remove("prevent-hover")}));const d=this.querySelector('input[type="checkbox"]');d&&d.addEventListener("change",()=>{if(d.checked){const t=new CustomEvent("select-card",{detail:{"Card value":d.value,"input name":d.getAttribute("name")}});this.dispatchEvent(t)}else{const t=new CustomEvent("unselect-card",{detail:{"Card value":d.value,"input name":d.getAttribute("name")}});this.dispatchEvent(t)}});const p=this.querySelector('[slot="secondary"]');p&&p.addEventListener("click",()=>{const t=new CustomEvent("secondary-button-clicked",{detail:{Title:p.getAttribute("title")}});this.dispatchEvent(t)}),this.querySelectorAll('[slot="btns"]').forEach(t=>{t.addEventListener("click",()=>{const e=new CustomEvent("action-button-clicked",{detail:{Title:t.getAttribute("title")}});this.dispatchEvent(e)})}),this.querySelector('[slot="link"]')&&this.classList.add("hasLink"),b(this,"iam-card",["select-card","unselect-card","secondary-button-clicked","action-button-clicked"])}static get observedAttributes(){return["data-image"]}attributeChangedCallback(r,o,a){const n=this.shadowRoot;if(n)switch(r){case"data-total":{const d=n.querySelector(".card__total");d&&(d.innerHTML=a||"");break}case"data-image":{if(o!=a){const d=n.querySelector(".card__head img");d&&d.setAttribute("src",a||"")}break}}}}export{y as default};
43
43
  //# sourceMappingURL=card.component.min.js.map