@iamproperty/components 5.1.0-beta → 5.1.0-beta10

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 (114) hide show
  1. package/assets/css/components/accordion.global.css.map +1 -1
  2. package/assets/css/components/card.css +1 -1
  3. package/assets/css/components/card.css.map +1 -1
  4. package/assets/css/components/carousel.css +1 -1
  5. package/assets/css/components/carousel.css.map +1 -1
  6. package/assets/css/components/component.native.css +1 -1
  7. package/assets/css/components/component.native.css.map +1 -1
  8. package/assets/css/components/component.reset.css +1 -1
  9. package/assets/css/components/component.reset.css.map +1 -1
  10. package/assets/css/components/fileupload.css +1 -1
  11. package/assets/css/components/fileupload.css.map +1 -1
  12. package/assets/css/components/header.css +1 -1
  13. package/assets/css/components/header.css.map +1 -1
  14. package/assets/css/components/marketing.css +1 -0
  15. package/assets/css/components/marketing.css.map +1 -0
  16. package/assets/css/components/nav.css +1 -1
  17. package/assets/css/components/nav.css.map +1 -1
  18. package/assets/css/components/nav.global.css +1 -1
  19. package/assets/css/components/nav.global.css.map +1 -1
  20. package/assets/css/components/pagination.css +1 -1
  21. package/assets/css/components/pagination.css.map +1 -1
  22. package/assets/css/components/slider.css.map +1 -1
  23. package/assets/css/core.min.css +1 -1
  24. package/assets/css/core.min.css.map +1 -1
  25. package/assets/css/style.min.css +1 -1
  26. package/assets/css/style.min.css.map +1 -1
  27. package/assets/img/signin-bg.png +0 -0
  28. package/assets/js/components/accordion/accordion.component.min.js +1 -1
  29. package/assets/js/components/actionbar/actionbar.component.min.js +1 -1
  30. package/assets/js/components/address-lookup/address-lookup.component.js +17 -3
  31. package/assets/js/components/address-lookup/address-lookup.component.min.js +4 -4
  32. package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
  33. package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
  34. package/assets/js/components/card/card.component.js +2 -1
  35. package/assets/js/components/card/card.component.min.js +4 -3
  36. package/assets/js/components/card/card.component.min.js.map +1 -1
  37. package/assets/js/components/carousel/carousel.component.js +61 -0
  38. package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
  39. package/assets/js/components/fileupload/fileupload.component.min.js +2 -2
  40. package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
  41. package/assets/js/components/header/header.component.js +6 -12
  42. package/assets/js/components/header/header.component.min.js +8 -14
  43. package/assets/js/components/header/header.component.min.js.map +1 -1
  44. package/assets/js/components/marketing/marketing.component.js +37 -0
  45. package/assets/js/components/nav/nav.component.js +4 -36
  46. package/assets/js/components/nav/nav.component.min.js +10 -13
  47. package/assets/js/components/nav/nav.component.min.js.map +1 -1
  48. package/assets/js/components/notification/notification.component.min.js +1 -1
  49. package/assets/js/components/pagination/pagination.component.min.js +2 -2
  50. package/assets/js/components/search/search.component.js +148 -0
  51. package/assets/js/components/search/search.component.min.js +14 -0
  52. package/assets/js/components/search/search.component.min.js.map +1 -0
  53. package/assets/js/components/table/table.component.min.js +5 -5
  54. package/assets/js/components/table/table.component.min.js.map +1 -1
  55. package/assets/js/components/tabs/tabs.component.min.js +1 -1
  56. package/assets/js/dynamic.js +1 -1
  57. package/assets/js/dynamic.min.js +3 -3
  58. package/assets/js/dynamic.min.js.map +1 -1
  59. package/assets/js/modules/carousel.js +15 -23
  60. package/assets/js/modules/dynamicEvents.js +28 -13
  61. package/assets/js/modules/helpers.js +3 -0
  62. package/assets/js/modules/table.js +8 -6
  63. package/assets/js/scripts.bundle.js +20 -25
  64. package/assets/js/scripts.bundle.js.map +1 -1
  65. package/assets/js/scripts.bundle.min.js +2 -2
  66. package/assets/js/scripts.bundle.min.js.map +1 -1
  67. package/assets/sass/_corefiles.scss +1 -0
  68. package/assets/sass/_elements.scss +1 -1
  69. package/assets/sass/_functions/mixins.scss +16 -0
  70. package/assets/sass/_functions/utilities.scss +0 -17
  71. package/assets/sass/_functions/variables.scss +1 -0
  72. package/assets/sass/components/card.scss +23 -3
  73. package/assets/sass/components/carousel.scss +86 -159
  74. package/assets/sass/components/component.native.scss +86 -3
  75. package/assets/sass/components/fileupload.scss +1 -1
  76. package/assets/sass/components/header.scss +53 -55
  77. package/assets/sass/components/marketing.scss +64 -0
  78. package/assets/sass/components/nav.global.scss +2 -1
  79. package/assets/sass/components/nav.scss +7 -1
  80. package/assets/sass/components/pagination.scss +4 -0
  81. package/assets/sass/elements/admin-panel.scss +9 -7
  82. package/assets/sass/elements/badge.scss +29 -0
  83. package/assets/sass/elements/dialog.scss +4 -4
  84. package/assets/sass/elements/forms.scss +4 -4
  85. package/assets/sass/elements/links.scss +2 -1
  86. package/assets/sass/foundations/reboot.scss +12 -13
  87. package/assets/sass/foundations/root.scss +11 -3
  88. package/assets/sass/helpers/max-height.scss +78 -4
  89. package/assets/sass/templates/auth.scss +112 -0
  90. package/assets/ts/components/address-lookup/address-lookup.component.ts +23 -4
  91. package/assets/ts/components/card/card.component.ts +2 -1
  92. package/assets/ts/components/carousel/README.md +39 -0
  93. package/assets/ts/components/carousel/carousel.component.ts +75 -0
  94. package/assets/ts/components/header/header.component.ts +6 -12
  95. package/assets/ts/components/marketing/marketing.component.ts +49 -0
  96. package/assets/ts/components/nav/README.md +2 -13
  97. package/assets/ts/components/nav/nav.component.ts +4 -47
  98. package/assets/ts/components/search/search.component.ts +177 -0
  99. package/assets/ts/dynamic.ts +1 -1
  100. package/assets/ts/modules/carousel.ts +21 -33
  101. package/assets/ts/modules/dynamicEvents.ts +44 -24
  102. package/assets/ts/modules/helpers.ts +7 -1
  103. package/assets/ts/modules/table.ts +11 -14
  104. package/dist/components.es.js +744 -949
  105. package/dist/components.umd.js +107 -101
  106. package/dist/style.css +1 -1
  107. package/package.json +1 -1
  108. package/src/components/Carousel/Carousel.vue +18 -103
  109. package/src/components/Header/Header.vue +1 -3
  110. package/src/components/Marketing/Marketing.vue +39 -0
  111. package/src/components/Marketing/README.md +20 -0
  112. package/src/components/Nav/README.md +1 -12
  113. package/src/components/Search/Search.vue +25 -0
  114. package/src/components/Carousel/Carousel.spec.js +0 -45
@@ -0,0 +1,61 @@
1
+ // @ts-nocheck
2
+ import carousel from "../../modules/carousel.js";
3
+ // Data layer Web component created
4
+ window.dataLayer = window.dataLayer || [];
5
+ window.dataLayer.push({
6
+ "event": "customElementRegistered",
7
+ "element": "carousel"
8
+ });
9
+ class iamCarousel extends HTMLElement {
10
+ constructor() {
11
+ super();
12
+ this.attachShadow({ mode: 'open' });
13
+ const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
14
+ const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
15
+ const loadCSS = `@import "${assetLocation}/css/components/carousel.css";`;
16
+ const template = document.createElement('template');
17
+ template.innerHTML = `
18
+ <style>
19
+ @import "${coreCSS}";
20
+ ${loadCSS}
21
+ ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
22
+ </style>
23
+ <div class="carousel" :id="'carousel'+id">
24
+ <div class="carousel__wrapper">
25
+ <div class="carousel__inner">
26
+
27
+ <slot></slot>
28
+ </div>
29
+
30
+ <div class="carousel__controls">
31
+
32
+ </div>
33
+
34
+ <button class="btn btn-prev" data-go="0" disabled>Prev</button>
35
+ <button class="btn btn-next" data-go="2">Next</button>
36
+
37
+ </div>
38
+ </div>
39
+ `;
40
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
41
+ }
42
+ connectedCallback() {
43
+ const carouselElement = this.shadowRoot.querySelector('.carousel');
44
+ const row = this.querySelector('.row');
45
+ const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
46
+ let itemCount = this.querySelectorAll(':scope > .row > .col').length;
47
+ carouselElement.setAttribute('data-row-class', row.className);
48
+ if (this.classList.contains('hide-btns'))
49
+ carouselElement.classList.add('hide-btns');
50
+ if (this.classList.contains('hide-controls'))
51
+ carouselElement.classList.add('hide-controls');
52
+ // populate the pips
53
+ let pips = "";
54
+ for (let i = 1; i <= itemCount; i++) {
55
+ pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>Slide ${i}</button>`;
56
+ }
57
+ carouselControls.innerHTML = pips;
58
+ carousel(carouselElement, row);
59
+ }
60
+ }
61
+ export default iamCarousel;
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.1.0-beta
2
+ * iamKey v5.1.0-beta10
3
3
  * Copyright 2022-2023 iamproperty
4
4
  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
5
5
  <style class="styles">
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * iamKey v5.1.0-beta
2
+ * iamKey v5.1.0-beta10
3
3
  * Copyright 2022-2023 iamproperty
4
4
  */function h(c,o){const r=o.querySelector(".files"),l=o.querySelector(".drop-area"),t=c.querySelector("input"),u=c.hasAttribute("data-maxsize")?c.getAttribute("data-maxsize"):0,a=t.cloneNode();l.append(a),o.addEventListener("click",e=>{e&&e.target instanceof HTMLElement&&e.target.closest(".btn-primary")&&(e.target.closest(".btn-primary"),(t.hasAttribute("multiple")?a:t).click())}),o.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest(".files button")){const i=new DataTransfer,{files:d}=t,p=e.target.closest(".files button");for(let n=0;n<d.length;n++){const s=d[n];s.name!=p.getAttribute("data-file")&&i.items.add(s)}t.files=i.files;const m=new Event("change");t.dispatchEvent(m)}}),a.addEventListener("change",e=>{if(t.hasAttribute("multiple")){const d=[...t.files,...a.files];let p=[];const m=new DataTransfer;for(let n=0;n<d.length;n++){const s=d[n],f=s.size/1e3;!p.includes(s.name)&&(u==0||f<u)&&m.items.add(s),p.push(s.name)}t.files=m.files}else t.files=a.files;const i=new Event("change");t.dispatchEvent(i)}),a.addEventListener("dragenter",e=>{a.classList.add("focus")}),a.addEventListener("dragleave",e=>{a.classList.remove("focus")}),a.addEventListener("drop",e=>{a.classList.remove("focus")}),t.addEventListener("change",e=>{r.innerHTML="";for(const i of t.files)r.innerHTML+=`<span class="file">${i.name} <button data-file="${i.name}">Remove</button></span>`})}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class b extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,l=document.createElement("template");l.innerHTML=`
5
5
  <style>
6
6
  @import "${r}";
7
- .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-white)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
7
+ .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-body)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
8
8
 
9
9
  ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
10
10
  </style>
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * iamKey v5.1.0-beta
2
+ * iamKey v5.1.0-beta10
3
3
  * Copyright 2022-2023 iamproperty
4
4
  */function r(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let i=e.textContent.toLowerCase();e.classList.add("d-none"),i.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
5
5
  <style>
@@ -20,28 +20,22 @@ class iamHeader extends HTMLElement {
20
20
  ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
21
21
  </style>
22
22
  <div class="header-banner">
23
- <div class="container" part="container">
24
- <slot name="breadcrumb"></slot>
25
- <div class="header-banner__inner">
26
- <slot></slot>
27
- </div>
28
- </div>
29
23
  <picture>
30
- <!-- Actual image only loaded on desktops -->
31
- <source srcset="" media="(min-width: 62em)">
32
- <!-- Placeholder image -->
33
24
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
34
25
  </picture>
26
+ <div class="container">
27
+ <slot></slot>
28
+ </div>
35
29
  </div>
36
30
  `;
37
31
  this.shadowRoot.appendChild(template.content.cloneNode(true));
38
32
  }
39
33
  connectedCallback() {
40
- this.classList.add('loaded');
34
+ this.classList.add('bg-primary');
41
35
  const picture = this.shadowRoot.querySelector('picture');
42
- const source = this.shadowRoot.querySelector('picture source');
36
+ const source = this.shadowRoot.querySelector('picture img');
43
37
  if (this.hasAttribute('image'))
44
- source.setAttribute('srcset', this.getAttribute('image'));
38
+ source.setAttribute('src', this.getAttribute('image'));
45
39
  else
46
40
  picture.remove();
47
41
  }
@@ -1,26 +1,20 @@
1
1
  /*!
2
- * iamKey v5.1.0-beta
2
+ * iamKey v5.1.0-beta10
3
3
  * Copyright 2022-2023 iamproperty
4
- */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
4
+ */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
5
5
  <style>
6
- @import "${r}";
7
- :host{padding-top:0 !important;margin-bottom:2rem}.header-banner{background:linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);position:relative;overflow:hidden;max-width:100% !important}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner .breadcrumb{margin-top:1.5rem;margin-bottom:-0.5rem}@media screen and (min-width: 62em){.header-banner .breadcrumb{position:absolute;top:0;left:3.75rem}}.header-banner__inner{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);color:var(--colour-body);background:#fff;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary) !important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem 0;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner picture img{display:none}@media screen and (min-width: 62em){.header-banner picture img{display:block;position:absolute;top:-0.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
6
+ @import "${e}";
7
+ :host{padding-top:0 !important;margin-bottom:2rem;background-color:rgba(0,0,0,0) !important}.header-banner{padding-top:2.75rem;max-width:120rem;min-height:25rem;margin-inline:auto;display:block;position:relative;height:auto}@media screen and (min-width: 62em){.header-banner{padding-top:5.25rem}}.header-banner>picture{display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;overflow:hidden;min-height:25rem;max-height:25rem}.header-banner>picture:after{content:"";display:block;position:absolute;z-index:-1;inset:0;background:linear-gradient(300deg, rgb(30, 190, 230) 0%, rgb(0, 49, 60) 100%);opacity:.85}.header-banner>picture img{display:block;position:absolute;z-index:-2;inset:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
8
8
 
9
9
  ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
10
10
  </style>
11
11
  <div class="header-banner">
12
- <div class="container" part="container">
13
- <slot name="breadcrumb"></slot>
14
- <div class="header-banner__inner">
15
- <slot></slot>
16
- </div>
17
- </div>
18
12
  <picture>
19
- <!-- Actual image only loaded on desktops -->
20
- <source srcset="" media="(min-width: 62em)">
21
- <!-- Placeholder image -->
22
13
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
23
14
  </picture>
15
+ <div class="container">
16
+ <slot></slot>
17
+ </div>
24
18
  </div>
25
- `,this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){this.classList.add("loaded");const e=this.shadowRoot.querySelector("picture"),r=this.shadowRoot.querySelector("picture source");this.hasAttribute("image")?r.setAttribute("srcset",this.getAttribute("image")):e.remove()}}export{t as default};
19
+ `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){this.classList.add("bg-primary");const t=this.shadowRoot.querySelector("picture"),e=this.shadowRoot.querySelector("picture img");this.hasAttribute("image")?e.setAttribute("src",this.getAttribute("image")):t.remove()}}export{o as default};
26
20
  //# sourceMappingURL=header.component.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"header\"\n});\nclass iamHeader extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/header.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <div class=\"header-banner\">\n <div class=\"container\" part=\"container\">\n <slot name=\"breadcrumb\"></slot>\n <div class=\"header-banner__inner\">\n <slot></slot>\n </div>\n </div>\n <picture>\n <!-- Actual image only loaded on desktops -->\n <source srcset=\"\" media=\"(min-width: 62em)\">\n <!-- Placeholder image -->\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n </picture>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n this.classList.add('loaded');\n const picture = this.shadowRoot.querySelector('picture');\n const source = this.shadowRoot.querySelector('picture source');\n if (this.hasAttribute('image'))\n source.setAttribute('srcset', this.getAttribute('image'));\n else\n picture.remove();\n }\n}\nexport default iamHeader;\n"],"names":["iamHeader","assetLocation","coreCSS","template","picture","source"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,QACf,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,qBAEzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,QAAQ,EAC3B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,gBAAgB,EACzD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,SAAU,KAAK,aAAa,OAAO,CAAC,EAExDD,EAAQ,OAAM,CACrB,CACL"}
1
+ {"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"header\"\n});\nclass iamHeader extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/header.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <div class=\"header-banner\">\n <picture>\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n </picture>\n <div class=\"container\">\n <slot></slot>\n </div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n this.classList.add('bg-primary');\n const picture = this.shadowRoot.querySelector('picture');\n const source = this.shadowRoot.querySelector('picture img');\n if (this.hasAttribute('image'))\n source.setAttribute('src', this.getAttribute('image'));\n else\n picture.remove();\n }\n}\nexport default iamHeader;\n"],"names":["iamHeader","assetLocation","coreCSS","template","picture","source"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,QACf,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,qBAEzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,YAAY,EAC/B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,aAAa,EACtD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,MAAO,KAAK,aAAa,OAAO,CAAC,EAErDD,EAAQ,OAAM,CACrB,CACL"}
@@ -0,0 +1,37 @@
1
+ // @ts-nocheck
2
+ // Data layer Web component created
3
+ window.dataLayer = window.dataLayer || [];
4
+ window.dataLayer.push({
5
+ "event": "customElementRegistered",
6
+ "element": "Marketing"
7
+ });
8
+ class iamMarketing extends HTMLElement {
9
+ constructor() {
10
+ super();
11
+ this.attachShadow({ mode: 'open' });
12
+ const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
13
+ const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
14
+ const loadCSS = `@import "${assetLocation}/css/components/marketing.css";`;
15
+ const template = document.createElement('template');
16
+ template.innerHTML = `
17
+ <style>
18
+ @import "${coreCSS}";
19
+ ${loadCSS}
20
+
21
+ </style>
22
+ <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
23
+ <div class="marketing">
24
+
25
+ <slot></slot>
26
+ </div>
27
+ `;
28
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
29
+ }
30
+ connectedCallback() {
31
+ this.classList.add('invert-colours');
32
+ if (this.hasAttribute('data-img')) {
33
+ this.shadowRoot.querySelector('.marketing').insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
34
+ }
35
+ }
36
+ }
37
+ export default iamMarketing;
@@ -43,7 +43,6 @@ class iamNav extends HTMLElement {
43
43
  <slot name="menus"></slot>
44
44
  </div>
45
45
  </div>
46
- <div class="lists"></div>
47
46
  <div class="backdrop" part="backdrop"></div>
48
47
  `;
49
48
  shadowRoot.appendChild(template.content.cloneNode(true));
@@ -229,30 +228,26 @@ class iamNav extends HTMLElement {
229
228
  containerDiv.setAttribute('data-title', summary.textContent);
230
229
  });
231
230
  // Search
232
- if (this.hasAttribute('data-search')) {
231
+ if (this.querySelector('[slot="search"]')) {
233
232
  menu.classList.add('has-search');
234
233
  let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
235
234
  searchWrapper.classList.remove('d-none');
236
235
  searchWrapper.insertAdjacentHTML('afterbegin', `<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
237
236
  <dialog id="search-dialog">
238
237
  <div class="container">
239
- <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
238
+ <div class="row">
240
239
  <div class="col mb-0 ms-auto col-md-7">
241
- <label for="search" class="visually-hidden">Search</label>
242
- <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
243
- <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
240
+ <slot name="search"></slot>
244
241
  </div>
245
242
  <div class="col d-none d-md-block mw-fit-content ms-3">
246
243
  <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close">Close search field</button>
247
244
  </div>
248
- </form>
245
+ </div>
249
246
  </div>
250
247
  </dialog>`);
251
248
  let searchButton = this.shadowRoot.querySelector('#search-button');
252
249
  let searchClose = this.shadowRoot.querySelector('#search-close');
253
250
  let searchDialog = this.shadowRoot.querySelector('#search-dialog');
254
- let searchInput = this.shadowRoot.querySelector('#search');
255
- let searchForm = this.shadowRoot.querySelector('#search-form');
256
251
  if (this.hasAttribute('data-search-open')) {
257
252
  searchDialog.setAttribute('open', 'open');
258
253
  this.classList.add('search-open');
@@ -268,33 +263,6 @@ class iamNav extends HTMLElement {
268
263
  this.classList.remove('search-open');
269
264
  searchButton.removeAttribute('aria-expanded');
270
265
  });
271
- // Search events
272
- searchInput.addEventListener('keydown', (event) => {
273
- const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
274
- this.dispatchEvent(keyupEvent);
275
- });
276
- searchInput.addEventListener('keyup', (event) => {
277
- if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list'))
278
- searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
279
- else
280
- searchInput.removeAttribute("list");
281
- const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
282
- this.dispatchEvent(keyupEvent);
283
- });
284
- searchInput.addEventListener('change', (event) => {
285
- const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
286
- this.dispatchEvent(changeEvent);
287
- });
288
- searchForm.addEventListener('submit', (event) => {
289
- if (this.hasAttribute('data-prevent-search'))
290
- event.preventDefault();
291
- const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
292
- this.dispatchEvent(submitEvent);
293
- });
294
- // Make sure any child lists are available to the search input
295
- this.querySelectorAll('datalist').forEach((list) => {
296
- iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend', list);
297
- });
298
266
  }
299
267
  }
300
268
  }
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * iamKey v5.1.0-beta
2
+ * iamKey v5.1.0-beta10
3
3
  * Copyright 2022-2023 iamproperty
4
- */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"nav"});class p extends HTMLElement{constructor(){super();const d=this.attachShadow({mode:"open"}),n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
4
+ */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"nav"});class p extends HTMLElement{constructor(){super();const c=this.attachShadow({mode:"open"}),n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
5
5
  <style class="styles">
6
- @import "${r}";
7
- :host{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important}::slotted(.brand){margin-right:auto !important}.btn-menu{padding:0;margin:0 0 0 2rem;text-align:center;height:3rem;padding-block:0.75rem;line-height:1.5rem;overflow:hidden;position:relative;background:none;border:none;width:1.5rem;text-indent:-1000%;color:var(--colour-brand)}.btn-menu i{font-size:1.5rem;line-height:1.5rem;position:absolute;text-indent:0px;width:1.5rem;text-align:center;top:0.75rem;right:0;margin:0 !important;transition:none !important}.btn-menu i+i{display:none}.btn-menu[aria-expanded] i{display:none}.btn-menu[aria-expanded] i+i{display:inline}@media screen and (max-width: 62em){.btn-menu>.btn{display:contents;display:contents;color:inherit !important;padding:0 !important;margin:0;font-weight:normal !important;line-height:inherit;font-size:inherit;transition:none !important}}@media screen and (min-width: 36em){.btn-menu{margin:0 0 0 3rem;width:auto;padding-right:1.875rem;text-indent:0}.btn-menu[aria-expanded]{text-indent:-1000%}}@media screen and (min-width: 62em){.btn-menu{width:fit-content;height:auto;margin:0 0 0 3rem !important;padding:0 !important;text-indent:0;padding-right:0 !important}.btn-menu[aria-expanded]{text-indent:0}.btn-menu .btn{margin:0 !important;display:flex}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.btn-menu .btn{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.btn-menu .btn .text-primary{color:var(--colour-primary) !important}.btn-menu .btn:is(:hover,:focus){color:var(--colour-inverted)}}@media screen and (min-width: 62em){.btn-menu .btn span{order:2}.btn-menu .btn i[class*=fa-]{position:relative;position:static;vertical-align:bottom;display:inline-block;font-size:1.2rem;margin-right:1rem !important;line-height:1em}.btn-menu .btn i[class*=fa-]+i[class*=fa-]{display:none}}@media screen and (max-width: 62em){:host>.container{display:contents}.menu__outer{position:absolute;top:6rem;left:0;width:100%;height:calc(100vh - 6rem);overflow:hidden;pointer-events:none;transition:background .5s}.menu__outer:has(.menu.open){background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}.menu::-webkit-scrollbar{width:6px}.menu::-webkit-scrollbar-track{border:0 !important}.menu::-webkit-scrollbar-thumb{border:0 !important}.menu{overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}.menu>*{flex-shrink:0}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){.menu{--colour-link: var(--colour-white);--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.menu{background-color:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.menu .text-primary{color:var(--colour-primary) !important}}@media screen and (max-width: 62em)and (forced-colors: active){.menu{outline:1px solid #fff}}@media screen and (max-width: 62em){.menu:before{content:"";position:absolute;display:block;top:0;left:0;width:100%;border-top:2px solid var(--colour-border);z-index:1}.menu.open{left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}.menu.closed *{display:none !important}.menu__secondary{display:none}.has-secondary .menu__secondary{display:block;margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:3rem !important;flex-grow:1;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee}}@media screen and (max-width: 62em){.has-secondary .menu__secondary .container{display:contents}::slotted(a:not([slot=logo])){display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}*:is(.has-search,.has-actions) .menu__primary{display:block;padding-bottom:3rem}.menu:not(.has-secondary) .menu__primary{display:block;padding-bottom:3rem}::slotted(button){display:block !important;margin:0 0 1.5rem 0 !important;width:100% !important;max-width:100% !important;text-align:center !important;flex-shrink:0}.has-actions slot[name=actions]{display:block;padding-bottom:1.5rem}slot[name=actions]::slotted(button){margin-top:0 !important}.dialog__wrapper{width:100%;margin:0 0 3rem 0 !important;flex-shrink:0}.dialog__wrapper>.btn{display:none}.dialog__wrapper dialog{display:contents}}@media screen and (max-width: 62em)and (min-width: 36em){.menu{padding-right:2.5rem !important}.has-secondary .menu__secondary{margin-right:-2.5rem !important;padding-right:2.5rem !important}.has-secondary .menu__secondary:before{width:calc(100% - 4rem) !important}::slotted(button){width:auto !important}}@media screen and (min-width: 62em){:host{max-width:100% !important;padding:0 !important}:host>.container{padding-block:1.5rem !important;display:flex;flex-wrap:nowrap;align-items:center}:host>.container:has(.has-secondary){padding-top:4rem !important}:host>.container>*{margin-bottom:0 !important}.btn-menu{display:none}.buttons-holder{display:contents}.buttons-holder .btn-menu{display:inline-block;order:2}.menu,.menu__outer,.menu__primary{display:contents}.menu__secondary{display:none}.has-secondary .menu__secondary{background-color:var(--colour-canvas-2);display:block;position:absolute;top:0;left:0;width:100%}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee;--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.has-secondary .menu__secondary .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){.has-secondary .menu__secondary{--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (min-width: 62em){.has-secondary .menu__secondary .container{margin-left:auto;margin-right:auto;padding:var(--container-padding) !important;padding-top:0.5rem !important;padding-bottom:0.5rem !important;text-align:right}::slotted(a[slot=secondary]){font-size:0.875rem !important}::slotted(a[slot=secondary]):after{top:calc(100% - .25em) !important}::slotted(a:not([slot=logo])),::slotted(button){margin-bottom:0 !important;margin-right:0 !important}::slotted(a:not([slot=logo])){margin-left:2rem !important;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{display:none}::slotted(button){margin-left:3rem !important}.has-actions slot[name=actions]{display:block;padding-left:3rem}slot[name=actions]::slotted(button){margin-left:0.75rem !important}:host([data-search]) slot[name=actions]{padding-left:0 !important}#search-wrapper{margin-left:1.5rem !important;position:static}#search-dialog[open]{position:absolute;top:auto;bottom:0;left:0;width:100%;padding-block:1.5rem;padding-inline:0;background-color:rgba(0,0,0,0);text-align:right;border-radius:0;box-shadow:none}#search-dialog[open] .container{padding:var(--container-padding);padding-bottom:0}:host(.search-open){background:#e6eaec !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){:host(.search-open){background:var(--colour-canvas-2) !important}}@media screen and (min-width: 62em){:host(.search-open) .buttons-holder,:host(.search-open) #search-button{display:none}:host(.search-open.bg-primary){background:var(--colour-primary) !important}:host(.search-open.bg-primary) .suffix,:host(.search-open.bg-primary) #search{border:2px solid #b3c1c5;color:#fff}:host(.search-open.bg-primary) #search{border-right:0}.backdrop{content:"";display:block;position:absolute;top:100%;left:0;height:calc(100vh - var(--nav-height));width:100%;z-index:-1;pointer-events:none;transition:background .5s}.backdrop.show{pointer-events:all;background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}::slotted(.nav--menu){overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}::slotted(.nav--menu)>*{flex-shrink:0}@media screen and (prefers-color-scheme: dark){::slotted(.nav--menu){--colour-link: var(--colour-white);--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (prefers-color-scheme: light){::slotted(.nav--menu){background-color:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}::slotted(.nav--menu) .text-primary{color:var(--colour-primary) !important}}@media(forced-colors: active){::slotted(.nav--menu){outline:1px solid #fff}}::slotted(.nav--menu):before{display:block;width:100%;border-top:2px solid var(--colour-border);z-index:1;padding-block:1.5rem;margin:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);color:var(--colour-heading);clear:both;font-size:1.75rem;line-height:2.25rem;max-width:var(--content-max-width)}@media screen and (min-width: 36em){::slotted(.nav--menu):before{font-size:2rem;line-height:2.5rem}}::slotted(.nav--menu):before{content:attr(data-title)}@media screen and (min-width: 62em){::slotted(.nav--menu){height:calc(100vh - var(--nav-height));top:100%}}::slotted(.nav--menu.open){left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}@media screen and (max-width: 62em){:host(.open) .menu__outer{background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}/*# sourceMappingURL=assets/css/components/nav.css.map */
6
+ @import "${e}";
7
+ :host{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important}::slotted(.brand){margin-right:auto !important}.btn-menu{padding:0;margin:0 0 0 2rem;text-align:center;height:3rem;padding-block:0.75rem;line-height:1.5rem;overflow:hidden;position:relative;background:none;border:none;width:1.5rem;text-indent:-1000%;color:var(--colour-brand)}.btn-menu i{font-size:1.5rem;line-height:1.5rem;position:absolute;text-indent:0px;width:1.5rem;text-align:center;top:0.75rem;right:0;margin:0 !important;transition:none !important}.btn-menu i+i{display:none}.btn-menu[aria-expanded] i{display:none}.btn-menu[aria-expanded] i+i{display:inline}@media screen and (max-width: 62em){.btn-menu>.btn{display:contents;display:contents;color:inherit !important;padding:0 !important;margin:0;font-weight:normal !important;line-height:inherit;font-size:inherit;transition:none !important}}@media screen and (min-width: 36em){.btn-menu{margin:0 0 0 3rem;width:auto;padding-right:1.875rem;text-indent:0}.btn-menu[aria-expanded]{text-indent:-1000%}}@media screen and (min-width: 62em){.btn-menu{width:fit-content;height:auto;margin:0 0 0 3rem !important;padding:0 !important;text-indent:0;padding-right:0 !important}.btn-menu[aria-expanded]{text-indent:0}.btn-menu .btn{margin:0 !important;display:flex}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.btn-menu .btn{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.btn-menu .btn .text-primary{color:var(--colour-primary) !important}.btn-menu .btn:is(:hover,:focus){color:var(--colour-inverted)}}@media screen and (min-width: 62em){.btn-menu .btn span{order:2}.btn-menu .btn i[class*=fa-]{position:relative;position:static;vertical-align:bottom;display:inline-block;font-size:1.2rem;margin-right:1rem !important}.btn-menu .btn i[class*=fa-]+i[class*=fa-]{display:none}}@media screen and (max-width: 62em){:host>.container{display:contents}.menu__outer{position:absolute;top:6rem;left:0;width:100%;height:calc(100vh - 6rem);overflow:hidden;pointer-events:none;transition:background .5s}.menu__outer:has(.menu.open){background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}.menu::-webkit-scrollbar{width:6px}.menu::-webkit-scrollbar-track{border:0 !important}.menu::-webkit-scrollbar-thumb{border:0 !important}.menu{overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}.menu>*{flex-shrink:0}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){.menu{--colour-link: var(--colour-white);--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.menu{background-color:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.menu .text-primary{color:var(--colour-primary) !important}}@media screen and (max-width: 62em)and (forced-colors: active){.menu{outline:1px solid #fff}}@media screen and (max-width: 62em){.menu:before{content:"";position:absolute;display:block;top:0;left:0;width:100%;border-top:2px solid var(--colour-border);z-index:1}.menu.open{left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}.menu.closed *{display:none !important}.menu__secondary{display:none}.has-secondary .menu__secondary{display:block;margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:3rem !important;flex-grow:1;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee}}@media screen and (max-width: 62em){.has-secondary .menu__secondary .container{display:contents}::slotted(a:not([slot=logo])){display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}*:is(.has-search,.has-actions) .menu__primary{display:block;padding-bottom:3rem}.menu:not(.has-secondary) .menu__primary{display:block;padding-bottom:3rem}::slotted(button){display:block !important;margin:0 0 1.5rem 0 !important;width:100% !important;max-width:100% !important;text-align:center !important;flex-shrink:0}.has-actions slot[name=actions]{display:block;padding-bottom:1.5rem}slot[name=actions]::slotted(button){margin-top:0 !important}.dialog__wrapper{width:100%;margin:0 0 3rem 0 !important;flex-shrink:0}.dialog__wrapper>.btn{display:none}.dialog__wrapper dialog{display:contents}}@media screen and (max-width: 62em)and (min-width: 36em){.menu{padding-right:2.5rem !important}.has-secondary .menu__secondary{margin-right:-2.5rem !important;padding-right:2.5rem !important}.has-secondary .menu__secondary:before{width:calc(100% - 4rem) !important}::slotted(button){width:auto !important}}@media screen and (min-width: 62em){:host{max-width:100% !important;padding:0 !important}:host>.container{padding-block:1.5rem !important;display:flex;flex-wrap:nowrap;align-items:center}:host>.container:has(.has-secondary){padding-top:4rem !important}:host>.container>*{margin-bottom:0 !important}.btn-menu{display:none}.buttons-holder{display:contents}.buttons-holder .btn-menu{display:inline-block;order:2}.menu,.menu__outer,.menu__primary{display:contents}.menu__secondary{display:none}.has-secondary .menu__secondary{background-color:var(--colour-canvas-2);display:block;position:absolute;top:0;left:0;width:100%}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee;--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}.has-secondary .menu__secondary .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){.has-secondary .menu__secondary{--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (min-width: 62em){.has-secondary .menu__secondary .container{margin-left:auto;margin-right:auto;padding:var(--container-padding) !important;padding-top:0.5rem !important;padding-bottom:0.5rem !important;text-align:right}::slotted(a[slot=secondary]){font-size:0.875rem !important}::slotted(a[slot=secondary]):after{top:calc(100% - .25em) !important}::slotted(a:not([slot=logo])),::slotted(button){margin-bottom:0 !important;margin-right:0 !important}::slotted(a:not([slot=logo])){margin-left:2rem !important;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{display:none}::slotted(button){margin-left:3rem !important}.has-actions slot[name=actions]{display:block;padding-left:3rem}slot[name=actions]::slotted(button){margin-left:0.75rem !important}:host([data-search]) slot[name=actions]{padding-left:0 !important}#search-wrapper{margin-left:1.5rem !important;position:static}#search-dialog[open]{position:absolute;top:auto;bottom:0;left:0;width:100%;padding-block:1.5rem;padding-inline:0;background-color:rgba(0,0,0,0);text-align:right;border-radius:0;box-shadow:none}#search-dialog[open] .container{padding:var(--container-padding);padding-bottom:0}:host(.search-open){background:#e6eaec !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){:host(.search-open){background:var(--colour-canvas-2) !important}}@media screen and (min-width: 62em){:host(.search-open) .buttons-holder,:host(.search-open) #search-button{display:none}:host(.search-open.bg-primary){background:var(--colour-primary) !important}:host(.search-open.bg-primary) .suffix,:host(.search-open.bg-primary) #search{border:2px solid #b3c1c5;color:#fff}:host(.search-open.bg-primary) #search{border-right:0}.backdrop{content:"";display:block;position:absolute;top:100%;left:0;height:calc(100vh - var(--nav-height));width:100%;z-index:-1;pointer-events:none;transition:background .5s}.backdrop.show{pointer-events:all;background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}::slotted(.nav--menu){overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}::slotted(.nav--menu)>*{flex-shrink:0}@media screen and (prefers-color-scheme: dark){::slotted(.nav--menu){--colour-link: var(--colour-white);--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (prefers-color-scheme: light){::slotted(.nav--menu){background-color:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}::slotted(.nav--menu) .text-primary{color:var(--colour-primary) !important}}@media(forced-colors: active){::slotted(.nav--menu){outline:1px solid #fff}}::slotted(.nav--menu):before{display:block;width:100%;border-top:2px solid var(--colour-border);z-index:1;padding-block:1.5rem;margin:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);color:var(--colour-heading);clear:both;font-size:1.75rem;line-height:2.25rem;max-width:var(--content-max-width)}@media screen and (min-width: 36em){::slotted(.nav--menu):before{font-size:2rem;line-height:2.5rem}}::slotted(.nav--menu):before{content:attr(data-title)}@media screen and (min-width: 62em){::slotted(.nav--menu){height:calc(100vh - var(--nav-height));top:100%}}::slotted(.nav--menu[data-open-title]):before{content:attr(data-open-title)}::slotted(.nav--menu.open){left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}@media screen and (max-width: 62em){:host(.open) .menu__outer{background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}/*# sourceMappingURL=assets/css/components/nav.css.map */
8
8
 
9
9
  </style>
10
10
  <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
@@ -31,22 +31,19 @@
31
31
  <slot name="menus"></slot>
32
32
  </div>
33
33
  </div>
34
- <div class="lists"></div>
35
34
  <div class="backdrop" part="backdrop"></div>
36
- `,d.appendChild(i.content.cloneNode(!0)),document.getElementById("navGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="navGlobal">body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}body{--nav-height: 6rem;--sticky-padding: 0px}body:has(iam-nav a[slot=secondary]){--nav-height: 8.5rem}body:has(iam-nav.nav--sticky){--sticky-padding: var(--nav-height)}nav:has(iam-nav){min-height:6rem;display:block}nav:has(iam-nav) iam-nav{position:absolute;top:0;left:0;width:100%;z-index:var(--index-menu)}@media screen and (min-width: 62em){nav:has(iam-nav a[slot=secondary]){min-height:8.5rem}}nav:has(iam-nav.nav--sticky) iam-nav{position:fixed}@media screen and (max-width: 36em){body:has(iam-nav.open:not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}nav:has(iam-nav.nav--xs-sticky) iam-nav{position:fixed}}@media screen and (min-width: 36em){body:has(iam-nav.open:not(.nav--sticky)){max-height:100vh;overflow:hidden}}iam-nav:not(:defined)>*:not([slot=logo]){display:none}iam-nav:not(:defined):not(:target)>*:not(.brand){display:none}iam-nav{--nav-height: 6rem;overscroll-behavior:contain !important;background-color:var(--colour-canvas);display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);padding-top:1.5rem;padding-bottom:1.5rem;width:100%;max-width:80rem}iam-nav:has(a[slot=secondary]){--nav-height: 8.5rem}iam-nav .brand{font-size:3rem;height:3rem;padding:0;text-decoration:none;min-width:min(var(--svg-width),14rem)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)){text-decoration:none}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info) !important}iam-nav details>summary{text-decoration:none}iam-nav details>summary:where(:hover,:focus,.selected){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details>summary:active{text-decoration-color:#a2d393 !important}iam-nav details[open]>summary{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-info)}@media screen and (max-width: 62em){iam-nav details{background-color:var(--colour-canvas);margin-left:-1.5rem;margin-right:-1.5rem;padding-inline:1.5rem;width:auto;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){iam-nav details{background-color:#eee}}@media screen and (max-width: 62em){iam-nav details summary{background-color:var(--colour-white);display:block;border:none;color:var(--colour-link);margin:0;margin-left:-1.5rem;margin-right:-1.5rem;padding:1.5rem 4rem 1.5rem 1.5rem;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){iam-nav details summary{background-color:var(--colour-canvas-2)}}@media screen and (max-width: 62em){iam-nav details summary:after{content:"\uF055";display:block;font-size:1.5rem;font-weight:300;position:absolute;top:1.5rem;right:1.5rem;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details[open]>summary:after{content:"\uF056";font-weight:bold}iam-nav details a{text-decoration:none;display:block;border:none;color:var(--colour-link);margin:0;margin-left:3rem;padding:1.5rem 0 1.5rem 0;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}iam-nav details a:after{background:var(--colour-border) !important;top:calc(100% - 2px) !important;width:100% !important}iam-nav details a:has(iam-card){display:none !important}iam-nav details details a:last-child:after{display:none}iam-nav details:after{content:"";position:absolute;top:calc(100% - 2px);left:1.5rem;height:2px;width:calc(100% - 3rem);display:block;height:2px;background-color:var(--colour-border) !important}iam-nav details details:after{display:none}iam-nav details details summary{padding:0 1.5rem 1.5rem 3.5rem;position:relative}iam-nav details details summary:after{left:1.5rem;font-size:1rem;top:0.1875rem;transform:none;font-weight:400}iam-nav details details[open]+details:before{content:"";display:block;background:var(--colour-canvas-2);padding-top:1.5rem;margin-left:-1.5rem;margin-right:-1.5rem}}@media screen and (max-width: 62em)and (min-width: 36em){iam-nav details{padding-right:2.5rem;margin-right:-2.5rem}iam-nav details:after{width:calc(100% - 4rem)}iam-nav details summary{padding-right:5rem;margin-right:-2.5rem}iam-nav details summary:after{right:2.5rem}iam-nav details details[open]+details:before{padding-right:2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 62em){iam-nav details{width:auto}iam-nav details>summary{display:block;border:none;color:var(--colour-link);margin:0;font-size:1rem;line-height:6rem;min-height:6rem;margin-block:-1.5rem;position:relative;font-weight:normal;white-space:nowrap;padding-right:1.5rem}iam-nav details>summary:after{content:"\uF078";display:block;font-size:1rem;font-weight:300;position:absolute;top:50%;transform:translate(0, -50%);right:0;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details:not(:first-child)>summary{margin-left:1.5rem}iam-nav details div{display:none}iam-nav details[open]>div{position:absolute;display:block;top:100%;left:0;width:100%;padding-inline:calc(50% - 34.75rem);box-shadow:0px 6px 12px rgba(0,0,0,.11)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div{background:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}iam-nav details[open]>div .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){iam-nav details[open]>div{--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details){background:var(--colour-canvas-2)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:has(details){background:#eee}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details) a{display:inline-block;margin-right:2rem}iam-nav details[open]>div:has(details) a:first-child{margin-right:0}iam-nav details[open]>div:has(details) a:has(iam-card){display:none}iam-nav details[open]>div:has(details) details{display:inline-block}iam-nav details[open]>div:has(details) details summary{display:inline-block;margin-left:0 !important;margin-right:2rem}iam-nav details[open]>div:has(details) details:first-child summary{margin-left:0}iam-nav details[open]>div:not(:has(details)){background:var(--colour-canvas);padding-top:8rem;padding-bottom:4rem;columns:3;column-gap:6.875rem}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:not(:has(details)){background:var(--colour-white);--colour-canvas-2: white}}@media screen and (min-width: 62em){iam-nav details[open]>div:not(:has(details))>a{margin-right:0 !important;display:block;max-height:6rem}iam-nav details[open]>div:not(:has(details))>a.double-height{min-height:6rem}iam-nav details[open]>div:not(:has(details)) a:has(iam-card){display:inline-block}iam-nav details[open]>div:not(:has(details)):before{content:attr(data-title);display:block;position:absolute;top:0;left:0;width:100%;color:var(--colour-white);padding-inline:calc(50% - 34.75rem);font-size:2rem;font-weight:bold;line-height:5.5rem;--gradient-direction: 90deg;background-color:var(--colour-info-theme);background-image:linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%) !important}iam-nav details[open]>div:not(:has(details)):has(iam-card){column-gap:1rem}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card)){margin-right:5.875rem !important}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:has(iam-card):after{display:none}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card))+a:has(iam-card){break-before:column}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)){font-size:1rem;line-height:1.5rem;padding-block:1.5rem;position:relative;font-weight:normal;display:block;margin:0}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):after{content:"";display:block;height:2px;width:100% !important;top:calc(100% - 2px);background-color:var(--colour-border) !important}iam-nav details>details>summary{padding-right:0;background:rgba(0,0,0,0)}iam-nav details>details>summary:after{display:none}iam-nav details details:not(:first-child)>summary{margin-left:2rem}}@media screen and (min-width: 62em){iam-nav.search-open>*:not([slot=logo]):not([slot=secondary]){display:none !important}}@media screen and (min-width: 62em){iam-nav .brand:has(~[slot=dual]){margin-right:1.5rem}iam-nav *:not([slot=dual]):has(+[slot=dual]){margin-right:auto}}iam-nav .nav--menu{outline:none !important}iam-nav .nav--menu::-webkit-scrollbar{width:6px}iam-nav .nav--menu::-webkit-scrollbar-track{border:0 !important}iam-nav .nav--menu::-webkit-scrollbar-thumb{border:0 !important}iam-nav .nav--menu hr{width:100% !important;border-top:2px solid var(--colour-border) !important}iam-nav .nav--menu a{display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 0 2.25rem 0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}iam-nav .nav--menu a:has(+a){margin-bottom:0 !important}iam-nav .nav--menu a:after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}iam-nav .nav--menu>button{min-width:100%;text-align:center}iam-nav .nav--menu.closed *{display:none !important}/*# sourceMappingURL=assets/css/components/nav.global.css.map */
37
- </style>`)}connectedCallback(){this.hasAttribute("data-css")&&this.shadowRoot.querySelector(".styles").insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`);const d=this.shadowRoot.querySelector(".btn-menu"),n=this.shadowRoot.querySelector(".menu"),r=this,i=this.shadowRoot.querySelector(".backdrop"),h=this.shadowRoot.querySelector(".buttons-holder");if(this.querySelectorAll(":scope > *").forEach(function(o){switch(o.tagName){case"BUTTON":o.setAttribute("slot","actions"),n.classList.add("has-actions");break}if(o.classList.contains("nav--menu")&&o.hasAttribute("data-title")&&o.hasAttribute("data-icon")){const t=o.getAttribute("data-title"),c=o.getAttribute("data-icon"),e=document.createElement("button");e.setAttribute("slot",t),e.classList.add("btn-menu"),e.innerHTML=`<span class="btn btn-primary"><span>${t}</span><i class="${c}"></i><i class="fa-regular fa-xmark-large"></i></span>`,h.insertAdjacentElement("beforeend",e);const m=e.querySelector(".btn-primary");o.setAttribute("slot","menus"),o.classList.contains("open")?(e.setAttribute("aria-expanded",!0),m.classList.toggle("active"),r.classList.add("open"),i.classList.add("show")):o.classList.add("closed"),e.addEventListener("click",function(l){l.preventDefault(),e.toggleAttribute("aria-expanded"),o.classList.toggle("open"),m.classList.toggle("active");let s=r.querySelector(":scope > details[open]");s&&s.removeAttribute("open"),o.classList.contains("open")?(n.classList.remove("open"),d.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),r.classList.add("open"),i.classList.add("show"),o.classList.remove("closed")):(r.classList.remove("open"),i.classList.remove("show"),setTimeout(function(){o.classList.add("closed")},1e3)),r.querySelectorAll(".nav--menu.open").forEach(function(u){u!=o&&u.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(u){u!=e&&(u.removeAttribute("aria-expanded"),u.querySelector(".btn-primary").classList.remove("active"))})},!1)}}),this.querySelector('a[slot="secondary"]')&&n.classList.add("has-secondary"),document.documentElement.style.setProperty("--scrollbar-width",window.innerWidth-document.documentElement.offsetWidth+"px"),d.addEventListener("click",function(o){o.preventDefault(),d.toggleAttribute("aria-expanded"),n.classList.toggle("open"),r.querySelectorAll(".nav--menu.open").forEach(function(a){a.classList.remove("open"),setTimeout(function(){a.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(a){a.removeAttribute("aria-expanded"),a.querySelector(".btn-primary").classList.remove("active")}),n.classList.contains("open")?(r.classList.add("open"),n.classList.remove("closed")):(r.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3))},!1),this.addEventListener("request-close",o=>{d.removeAttribute("aria-expanded"),n.classList.remove("open"),r.classList.remove("open")}),i.addEventListener("click",o=>{let a=this.querySelector("details[open] summary");a&&a.click(),r.querySelectorAll(".nav--menu.open").forEach(function(t){t.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(t){t.removeAttribute("aria-expanded"),t.querySelector(".btn-primary").classList.remove("active")}),i.classList.remove("show")}),this.addEventListener("click",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("summary")&&window.innerWidth>992){let t=o.target.closest("summary").closest("details"),c=t.parentNode;t.hasAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","true"),r.querySelectorAll(".nav--menu.open").forEach(function(e){e.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(e){e.removeAttribute("aria-expanded"),e.querySelector(".btn-primary").classList.remove("active")}),Array.from(c.querySelectorAll(":scope > details")).forEach((e,m)=>{e!=t&&e.removeAttribute("open")}),this.querySelectorAll(":scope > details[open]").length?(i.classList.add("show"),r.classList.add("open")):(i.classList.remove("show"),r.classList.remove("open")),o.preventDefault()}}),this.querySelectorAll("details").forEach(o=>{let a=o.querySelector("summary");o.querySelector(":Scope > div").setAttribute("data-title",a.textContent)}),this.hasAttribute("data-search")){n.classList.add("has-search");let o=this.shadowRoot.querySelector("#search-wrapper");o.classList.remove("d-none"),o.insertAdjacentHTML("afterbegin",`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
35
+ `,c.appendChild(i.content.cloneNode(!0)),document.getElementById("navGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="navGlobal">body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}body{--nav-height: 6rem;--sticky-padding: 0px}body:has(iam-nav a[slot=secondary]){--nav-height: 8.5rem}body:has(iam-nav.nav--sticky){--sticky-padding: var(--nav-height)}nav:has(iam-nav){min-height:6rem;display:block;position:relative}nav:has(iam-nav) iam-nav{position:absolute;top:0;left:0;width:100%;z-index:var(--index-menu)}@media screen and (min-width: 62em){nav:has(iam-nav a[slot=secondary]){min-height:8.5rem}}nav:has(iam-nav.nav--sticky) iam-nav{position:fixed}@media screen and (max-width: 36em){body:has(iam-nav.open:not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}nav:has(iam-nav.nav--xs-sticky) iam-nav{position:fixed}}@media screen and (min-width: 36em){body:has(iam-nav.open:not(.nav--sticky)){max-height:100vh;overflow:hidden}}iam-nav:not(:defined)>*:not([slot=logo]){display:none}iam-nav:not(:defined):not(:target)>*:not(.brand){display:none}iam-nav{--nav-height: 6rem;overscroll-behavior:contain !important;background-color:var(--colour-canvas);display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);padding-top:1.5rem;padding-bottom:1.5rem;width:100%;max-width:80rem}iam-nav:has(a[slot=secondary]){--nav-height: 8.5rem}iam-nav .brand{font-size:3rem;height:3rem;padding:0;text-decoration:none;min-width:min(var(--svg-width),14rem)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)){text-decoration:none}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info) !important}iam-nav details>summary{text-decoration:none}iam-nav details>summary:where(:hover,:focus,.selected){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details>summary:active{text-decoration-color:#a2d393 !important}iam-nav details[open]>summary{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-info)}@media screen and (max-width: 62em){iam-nav details{background-color:var(--colour-canvas);margin-left:-1.5rem;margin-right:-1.5rem;padding-inline:1.5rem;width:auto;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){iam-nav details{background-color:#eee}}@media screen and (max-width: 62em){iam-nav details summary{background-color:var(--colour-white);display:block;border:none;color:var(--colour-link);margin:0;margin-left:-1.5rem;margin-right:-1.5rem;padding:1.5rem 4rem 1.5rem 1.5rem;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){iam-nav details summary{background-color:var(--colour-canvas-2)}}@media screen and (max-width: 62em){iam-nav details summary:after{content:"\uF055";display:block;font-size:1.5rem;font-weight:300;position:absolute;top:1.5rem;right:1.5rem;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details[open]>summary:after{content:"\uF056";font-weight:bold}iam-nav details a{text-decoration:none;display:block;border:none;color:var(--colour-link);margin:0;margin-left:3rem;padding:1.5rem 0 1.5rem 0;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}iam-nav details a:after{background:var(--colour-border) !important;top:calc(100% - 2px) !important;width:100% !important}iam-nav details a:has(iam-card){display:none !important}iam-nav details details a:last-child:after{display:none}iam-nav details:after{content:"";position:absolute;top:calc(100% - 2px);left:1.5rem;height:2px;width:calc(100% - 3rem);display:block;height:2px;background-color:var(--colour-border) !important}iam-nav details details:after{display:none}iam-nav details details summary{padding:0 1.5rem 1.5rem 3.5rem;position:relative}iam-nav details details summary:after{left:1.5rem;font-size:1rem;top:0.1875rem;transform:none;font-weight:400}iam-nav details details[open]+details:before{content:"";display:block;background:var(--colour-canvas-2);padding-top:1.5rem;margin-left:-1.5rem;margin-right:-1.5rem}}@media screen and (max-width: 62em)and (min-width: 36em){iam-nav details{padding-right:2.5rem;margin-right:-2.5rem}iam-nav details:after{width:calc(100% - 4rem)}iam-nav details summary{padding-right:5rem;margin-right:-2.5rem}iam-nav details summary:after{right:2.5rem}iam-nav details details[open]+details:before{padding-right:2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 62em){iam-nav details{width:auto}iam-nav details>summary{display:block;border:none;color:var(--colour-link);margin:0;font-size:1rem;line-height:6rem;min-height:6rem;margin-block:-1.5rem;position:relative;font-weight:normal;white-space:nowrap;padding-right:1.5rem}iam-nav details>summary:after{content:"\uF078";display:block;font-size:1rem;font-weight:300;position:absolute;top:50%;transform:translate(0, -50%);right:0;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details:not(:first-child)>summary{margin-left:1.5rem}iam-nav details div{display:none}iam-nav details[open]>div{position:absolute;display:block;top:100%;left:0;width:100%;padding-inline:calc(50% - 34.75rem);box-shadow:0px 6px 12px rgba(0,0,0,.11)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div{background:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}iam-nav details[open]>div .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){iam-nav details[open]>div{--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details){background:var(--colour-canvas-2)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:has(details){background:#eee}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details) a{display:inline-block;margin-right:2rem}iam-nav details[open]>div:has(details) a:first-child{margin-right:0}iam-nav details[open]>div:has(details) a:has(iam-card){display:none}iam-nav details[open]>div:has(details) details{display:inline-block}iam-nav details[open]>div:has(details) details summary{display:inline-block;margin-left:0 !important;margin-right:2rem}iam-nav details[open]>div:has(details) details:first-child summary{margin-left:0}iam-nav details[open]>div:not(:has(details)){background:var(--colour-canvas);padding-top:8rem;padding-bottom:4rem;columns:3;column-gap:6.875rem}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:not(:has(details)){background:var(--colour-white);--colour-canvas-2: white}}@media screen and (min-width: 62em){iam-nav details[open]>div:not(:has(details))>a{margin-right:0 !important;display:block;max-height:6rem}iam-nav details[open]>div:not(:has(details))>a.double-height{min-height:6rem}iam-nav details[open]>div:not(:has(details)) a:has(iam-card){display:inline-block}iam-nav details[open]>div:not(:has(details)):before{content:attr(data-title);display:block;position:absolute;top:0;left:0;width:100%;color:var(--colour-white);padding-inline:calc(50% - 34.75rem);font-size:2rem;font-weight:bold;line-height:5.5rem;--gradient-direction: 90deg;background-color:var(--colour-info-theme);background-image:linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%) !important}iam-nav details[open]>div:not(:has(details)):has(iam-card){column-gap:1rem}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card)){margin-right:5.875rem !important}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:has(iam-card):after{display:none}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card))+a:has(iam-card){break-before:column}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)){font-size:1rem;line-height:1.5rem;padding-block:1.5rem;position:relative;font-weight:normal;display:block;margin:0}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):after{content:"";display:block;height:2px;width:100% !important;top:calc(100% - 2px);background-color:var(--colour-border) !important}iam-nav details>details>summary{padding-right:0;background:rgba(0,0,0,0)}iam-nav details>details>summary:after{display:none}iam-nav details details:not(:first-child)>summary{margin-left:2rem}}@media screen and (min-width: 62em){iam-nav.search-open>*:not([slot=logo]):not([slot=secondary]):not([slot=search]){display:none !important}}@media screen and (min-width: 62em){iam-nav .brand:has(~[slot=dual]){margin-right:1.5rem}iam-nav *:not([slot=dual]):has(+[slot=dual]){margin-right:auto}}iam-nav .nav--menu{outline:none !important}iam-nav .nav--menu::-webkit-scrollbar{width:6px}iam-nav .nav--menu::-webkit-scrollbar-track{border:0 !important}iam-nav .nav--menu::-webkit-scrollbar-thumb{border:0 !important}iam-nav .nav--menu hr{width:100% !important;border-top:2px solid var(--colour-border) !important}iam-nav .nav--menu a{display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 0 2.25rem 0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}iam-nav .nav--menu a:has(+a){margin-bottom:0 !important}iam-nav .nav--menu a:after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}iam-nav .nav--menu>button{min-width:100%;text-align:center}iam-nav .nav--menu.closed *{display:none !important}/*# sourceMappingURL=assets/css/components/nav.global.css.map */
36
+ </style>`)}connectedCallback(){this.hasAttribute("data-css")&&this.shadowRoot.querySelector(".styles").insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`);const c=this.shadowRoot.querySelector(".btn-menu"),n=this.shadowRoot.querySelector(".menu"),e=this,i=this.shadowRoot.querySelector(".backdrop"),u=this.shadowRoot.querySelector(".buttons-holder");if(this.querySelectorAll(":scope > *").forEach(function(o){switch(o.tagName){case"BUTTON":o.setAttribute("slot","actions"),n.classList.add("has-actions");break}if(o.classList.contains("nav--menu")&&o.hasAttribute("data-title")&&o.hasAttribute("data-icon")){const t=o.getAttribute("data-title"),l=o.getAttribute("data-icon"),r=document.createElement("button");r.setAttribute("slot",t),r.classList.add("btn-menu"),r.innerHTML=`<span class="btn btn-primary"><span>${t}</span><i class="${l}"></i><i class="fa-regular fa-xmark-large"></i></span>`,u.insertAdjacentElement("beforeend",r);const d=r.querySelector(".btn-primary");o.setAttribute("slot","menus"),o.classList.contains("open")?(r.setAttribute("aria-expanded",!0),d.classList.toggle("active"),e.classList.add("open"),i.classList.add("show")):o.classList.add("closed"),r.addEventListener("click",function(h){h.preventDefault(),r.toggleAttribute("aria-expanded"),o.classList.toggle("open"),d.classList.toggle("active");let m=e.querySelector(":scope > details[open]");m&&m.removeAttribute("open"),o.classList.contains("open")?(n.classList.remove("open"),c.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),e.classList.add("open"),i.classList.add("show"),o.classList.remove("closed")):(e.classList.remove("open"),i.classList.remove("show"),setTimeout(function(){o.classList.add("closed")},1e3)),e.querySelectorAll(".nav--menu.open").forEach(function(s){s!=o&&s.classList.remove("open")}),e.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(s){s!=r&&(s.removeAttribute("aria-expanded"),s.querySelector(".btn-primary").classList.remove("active"))})},!1)}}),this.querySelector('a[slot="secondary"]')&&n.classList.add("has-secondary"),document.documentElement.style.setProperty("--scrollbar-width",window.innerWidth-document.documentElement.offsetWidth+"px"),c.addEventListener("click",function(o){o.preventDefault(),c.toggleAttribute("aria-expanded"),n.classList.toggle("open"),e.querySelectorAll(".nav--menu.open").forEach(function(a){a.classList.remove("open"),setTimeout(function(){a.classList.add("closed")},1e3)}),e.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(a){a.removeAttribute("aria-expanded"),a.querySelector(".btn-primary").classList.remove("active")}),n.classList.contains("open")?(e.classList.add("open"),n.classList.remove("closed")):(e.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3))},!1),this.addEventListener("request-close",o=>{c.removeAttribute("aria-expanded"),n.classList.remove("open"),e.classList.remove("open")}),i.addEventListener("click",o=>{let a=this.querySelector("details[open] summary");a&&a.click(),e.querySelectorAll(".nav--menu.open").forEach(function(t){t.classList.remove("open")}),e.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(t){t.removeAttribute("aria-expanded"),t.querySelector(".btn-primary").classList.remove("active")}),i.classList.remove("show")}),this.addEventListener("click",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("summary")&&window.innerWidth>992){let t=o.target.closest("summary").closest("details"),l=t.parentNode;t.hasAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","true"),e.querySelectorAll(".nav--menu.open").forEach(function(r){r.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3)}),e.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(r){r.removeAttribute("aria-expanded"),r.querySelector(".btn-primary").classList.remove("active")}),Array.from(l.querySelectorAll(":scope > details")).forEach((r,d)=>{r!=t&&r.removeAttribute("open")}),this.querySelectorAll(":scope > details[open]").length?(i.classList.add("show"),e.classList.add("open")):(i.classList.remove("show"),e.classList.remove("open")),o.preventDefault()}}),this.querySelectorAll("details").forEach(o=>{let a=o.querySelector("summary");o.querySelector(":Scope > div").setAttribute("data-title",a.textContent)}),this.querySelector('[slot="search"]')){n.classList.add("has-search");let o=this.shadowRoot.querySelector("#search-wrapper");o.classList.remove("d-none"),o.insertAdjacentHTML("afterbegin",`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
38
37
  <dialog id="search-dialog">
39
38
  <div class="container">
40
- <form action="${this.hasAttribute("data-search")?this.getAttribute("data-search"):""}" class="row" id="search-form">
39
+ <div class="row">
41
40
  <div class="col mb-0 ms-auto col-md-7">
42
- <label for="search" class="visually-hidden">Search</label>
43
- <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
44
- <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute("data-list")?this.getAttribute("data-list"):""}" />
41
+ <slot name="search"></slot>
45
42
  </div>
46
43
  <div class="col d-none d-md-block mw-fit-content ms-3">
47
44
  <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close">Close search field</button>
48
45
  </div>
49
- </form>
46
+ </div>
50
47
  </div>
51
- </dialog>`);let a=this.shadowRoot.querySelector("#search-button"),t=this.shadowRoot.querySelector("#search-close"),c=this.shadowRoot.querySelector("#search-dialog"),e=this.shadowRoot.querySelector("#search"),m=this.shadowRoot.querySelector("#search-form");this.hasAttribute("data-search-open")&&(c.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)),a.addEventListener("click",l=>{c.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)}),t.addEventListener("click",l=>{c.removeAttribute("open"),this.classList.remove("search-open"),a.removeAttribute("aria-expanded")}),e.addEventListener("keydown",l=>{const s=new CustomEvent("search-keydown",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("keyup",l=>{e.value.length>=3&&e.hasAttribute("data-list")?e.setAttribute("list",e.getAttribute("data-list")):e.removeAttribute("list");const s=new CustomEvent("search-keyup",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("change",l=>{const s=new CustomEvent("search-change",{detail:{search:e.value}});this.dispatchEvent(s)}),m.addEventListener("submit",l=>{this.hasAttribute("data-prevent-search")&&l.preventDefault();const s=new CustomEvent("search-submit",{detail:{search:e.value}});this.dispatchEvent(s)}),this.querySelectorAll("datalist").forEach(l=>{r.shadowRoot.querySelector(".lists").insertAdjacentElement("beforeend",l)})}}}export{p as default};
48
+ </dialog>`);let a=this.shadowRoot.querySelector("#search-button"),t=this.shadowRoot.querySelector("#search-close"),l=this.shadowRoot.querySelector("#search-dialog");this.hasAttribute("data-search-open")&&(l.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)),a.addEventListener("click",r=>{l.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)}),t.addEventListener("click",r=>{l.removeAttribute("open"),this.classList.remove("search-open"),a.removeAttribute("aria-expanded")})}}}export{p as default};
52
49
  //# sourceMappingURL=nav.component.min.js.map