@iamproperty/components 7.4.0 → 7.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/actionbar.global.css +1 -1
- package/assets/css/components/actionbar.global.css.map +1 -1
- package/assets/css/components/address-lookup.component.css +1 -0
- package/assets/css/components/address-lookup.component.css.map +1 -0
- package/assets/css/components/barchart.component.css +1 -1
- package/assets/css/components/barchart.component.css.map +1 -1
- package/assets/css/components/calendar.component.css +1 -1
- package/assets/css/components/calendar.component.css.map +1 -1
- package/assets/css/components/calendar.config.css.map +1 -1
- package/assets/css/components/card.component.css +1 -1
- package/assets/css/components/card.component.css.map +1 -1
- package/assets/css/components/carousel.component.css +1 -1
- package/assets/css/components/carousel.component.css.map +1 -1
- package/assets/css/components/charts.css +1 -1
- package/assets/css/components/charts.css.map +1 -1
- package/assets/css/components/collapsible-side.css +1 -1
- package/assets/css/components/collapsible-side.css.map +1 -1
- package/assets/css/components/content.component.css +1 -1
- package/assets/css/components/content.component.css.map +1 -1
- package/assets/css/components/darkmode.component.css +1 -0
- package/assets/css/components/darkmode.component.css.map +1 -0
- package/assets/css/components/doughnutchart.component.css +1 -1
- package/assets/css/components/doughnutchart.component.css.map +1 -1
- package/assets/css/components/inline-edit.css.map +1 -1
- package/assets/css/components/{menu.css → menu.global.css} +1 -1
- package/assets/css/components/menu.global.css.map +1 -0
- package/assets/css/components/milestone.css +1 -1
- package/assets/css/components/milestone.css.map +1 -1
- package/assets/css/components/multi-step.component.css +1 -1
- package/assets/css/components/multi-step.component.css.map +1 -1
- package/assets/css/components/multiselect.css.map +1 -1
- package/assets/css/components/multiselect.preload.css +1 -1
- package/assets/css/components/multiselect.preload.css.map +1 -1
- package/assets/css/components/nav.component.css +1 -1
- package/assets/css/components/nav.component.css.map +1 -1
- package/assets/css/components/nav.global.css +1 -1
- package/assets/css/components/nav.global.css.map +1 -1
- package/assets/css/components/notification.css +1 -1
- package/assets/css/components/notification.css.map +1 -1
- package/assets/css/components/pagination.css.map +1 -1
- package/assets/css/components/property-searchbar.css +1 -1
- package/assets/css/components/property-searchbar.css.map +1 -1
- package/assets/css/components/split-button.component.css +1 -1
- package/assets/css/components/split-button.component.css.map +1 -1
- package/assets/css/components/word-count.component.css +1 -0
- package/assets/css/components/word-count.component.css.map +1 -0
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/mobile-core.min.css +1 -1
- package/assets/css/mobile-core.min.css.map +1 -1
- package/assets/css/mobile.min.css +1 -1
- package/assets/css/mobile.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/components/accordion/accordion.component.js +40 -19
- package/assets/js/components/accordion/accordion.component.min.js +15 -15
- package/assets/js/components/accordion/accordion.component.min.js.map +1 -1
- package/assets/js/components/actionbar/actionbar.component.js +8 -0
- package/assets/js/components/actionbar/actionbar.component.min.js +6 -5
- package/assets/js/components/actionbar/actionbar.component.min.js.map +1 -1
- package/assets/js/components/address-lookup/address-lookup.component.js +6 -8
- package/assets/js/components/address-lookup/address-lookup.component.min.js +10 -12
- package/assets/js/components/address-lookup/address-lookup.component.min.js.map +1 -1
- package/assets/js/components/advanced-select/advanced-select.component.min.js +1 -1
- package/assets/js/components/advanced-select/advanced-select.component.min.js.map +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.min.js.map +1 -1
- package/assets/js/components/barchart/barchart.component.min.js +2 -2
- package/assets/js/components/barchart/barchart.component.min.js.map +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js.map +1 -1
- package/assets/js/components/calendar/calendar.component.js +153 -136
- package/assets/js/components/calendar/calendar.component.min.js +3 -3
- package/assets/js/components/calendar/calendar.component.min.js.map +1 -1
- package/assets/js/components/card/card.component.js +3 -9
- package/assets/js/components/card/card.component.min.js +13 -7
- package/assets/js/components/card/card.component.min.js.map +1 -1
- package/assets/js/components/carousel/carousel.component.js +17 -19
- package/assets/js/components/carousel/carousel.component.min.js +17 -19
- package/assets/js/components/carousel/carousel.component.min.js.map +1 -1
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +2 -2
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map +1 -1
- package/assets/js/components/content/content.component.min.js +2 -2
- package/assets/js/components/content/content.component.min.js.map +1 -1
- package/assets/js/components/darkmode/darkmode.component.js +70 -0
- package/assets/js/components/darkmode/darkmode.component.min.js +10 -0
- package/assets/js/components/darkmode/darkmode.component.min.js.map +1 -0
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +2 -2
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js.map +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js.map +1 -1
- package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
- package/assets/js/components/filter-card/filter-card.component.min.js.map +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js.map +1 -1
- package/assets/js/components/header/header.component.min.js +1 -1
- package/assets/js/components/header/header.component.min.js.map +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.min.js.map +1 -1
- package/assets/js/components/marketing/marketing.component.min.js +1 -1
- package/assets/js/components/marketing/marketing.component.min.js.map +1 -1
- package/assets/js/components/menu/menu.component.js +2 -2
- package/assets/js/components/menu/menu.component.min.js +4 -5
- package/assets/js/components/menu/menu.component.min.js.map +1 -1
- package/assets/js/components/milestone/milestone.component.js +12 -14
- package/assets/js/components/milestone/milestone.component.min.js +1 -1
- package/assets/js/components/milestone/milestone.component.min.js.map +1 -1
- package/assets/js/components/milestone-group/milestone-group.component.js +10 -12
- package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
- package/assets/js/components/milestone-group/milestone-group.component.min.js.map +1 -1
- package/assets/js/components/multi-step/multi-step.component.min.js +3 -3
- package/assets/js/components/multi-step/multi-step.component.min.js.map +1 -1
- package/assets/js/components/multiselect/multiselect.component.js +2 -2
- package/assets/js/components/multiselect/multiselect.component.min.js +1 -1
- package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
- package/assets/js/components/nav/nav.component.js +2 -3
- package/assets/js/components/nav/nav.component.min.js +5 -5
- package/assets/js/components/nav/nav.component.min.js.map +1 -1
- package/assets/js/components/notification/notification.component.js +1 -3
- package/assets/js/components/notification/notification.component.min.js +5 -5
- package/assets/js/components/notification/notification.component.min.js.map +1 -1
- package/assets/js/components/pagination/pagination.component.min.js +1 -1
- package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
- package/assets/js/components/rank/rank.component.min.js +1 -1
- package/assets/js/components/rank/rank.component.min.js.map +1 -1
- package/assets/js/components/rankings/rankings.component.min.js +1 -1
- package/assets/js/components/rankings/rankings.component.min.js.map +1 -1
- package/assets/js/components/record-card/record-card.component.min.js +1 -1
- package/assets/js/components/record-card/record-card.component.min.js.map +1 -1
- package/assets/js/components/search/search.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js.map +1 -1
- package/assets/js/components/slider/slider.component.min.js +1 -1
- package/assets/js/components/slider/slider.component.min.js.map +1 -1
- package/assets/js/components/split-button/split-button.component.js +1 -3
- package/assets/js/components/split-button/split-button.component.min.js +8 -11
- package/assets/js/components/split-button/split-button.component.min.js.map +1 -1
- package/assets/js/components/table/table.component.min.js +1 -1
- package/assets/js/components/table/table.component.min.js.map +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.min.js +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.min.js.map +1 -1
- package/assets/js/components/table-basic/table-basic.component.min.js +1 -1
- package/assets/js/components/table-basic/table-basic.component.min.js.map +1 -1
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +1 -1
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js.map +1 -1
- package/assets/js/components/table-submit/table-submit.component.min.js +1 -1
- package/assets/js/components/table-submit/table-submit.component.min.js.map +1 -1
- package/assets/js/components/tabs/tabs.component.min.js +1 -1
- package/assets/js/components/tabs/tabs.component.min.js.map +1 -1
- package/assets/js/components/video-card/video-card.component.min.js +1 -1
- package/assets/js/components/video-card/video-card.component.min.js.map +1 -1
- package/assets/js/components/word-count/word-count.component.js +81 -0
- package/assets/js/components/word-count/word-count.component.min.js +12 -0
- package/assets/js/components/word-count/word-count.component.min.js.map +1 -0
- package/assets/js/components.js +1 -0
- package/assets/js/modules/advanced-select.js +1 -1
- package/assets/js/modules/dynamicEvents.js +3 -3
- package/assets/js/modules/inputs.js +0 -18
- package/assets/js/modules/milestone.js +2 -2
- package/assets/js/scripts.bundle.js +3 -3
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/js/scripts.js +2 -1
- package/assets/sass/_components.scss +4 -4
- package/assets/sass/_example.scss +1 -1
- package/assets/sass/_functions/utility-mixins.scss +0 -1
- package/assets/sass/components/actionbar.component.scss +22 -0
- package/assets/sass/components/actionbar.global.scss +1 -1
- package/assets/sass/components/{address-lookup.scss → address-lookup.component.scss} +10 -0
- package/assets/sass/components/calendar.component.scss +163 -271
- package/assets/sass/components/calendar.config.scss +69 -122
- package/assets/sass/components/darkmode.component.scss +22 -0
- package/assets/sass/components/milestone.scss +69 -60
- package/assets/sass/components/multi-step.component.scss +1 -1
- package/assets/sass/components/multiselect.preload.scss +1 -1
- package/assets/sass/components/multiselect.scss +1 -2
- package/assets/sass/components/nav.component.scss +16 -6
- package/assets/sass/components/nav.global.scss +8 -12
- package/assets/sass/components/notification.scss +32 -13
- package/assets/sass/components/split-button.component.scss +3 -1
- package/assets/sass/components/table-basic.global.scss +32 -32
- package/assets/sass/components/word-count.component.scss +26 -0
- package/assets/sass/elements/admin-panel.scss +1 -1
- package/assets/sass/elements/buttons--compact.scss +1 -1
- package/assets/sass/elements/details.scss +33 -6
- package/assets/sass/elements/forms.scss +18 -33
- package/assets/sass/elements/lists.scss +1 -1
- package/assets/sass/elements/toggle-button.scss +1 -0
- package/assets/sass/foundations/colours.scss +0 -0
- package/assets/sass/foundations/reboot.scss +8 -1
- package/assets/sass/foundations/root.scss +41 -51
- package/assets/ts/components/accordion/accordion.component.ts +47 -26
- package/assets/ts/components/actionbar/actionbar.component.ts +10 -0
- package/assets/ts/components/address-lookup/address-lookup.component.ts +6 -8
- package/assets/ts/components/calendar/calendar.component.ts +368 -498
- package/assets/ts/components/card/card.component.ts +2 -9
- package/assets/ts/components/carousel/carousel.component.ts +17 -19
- package/assets/ts/components/darkmode/darkmode.component.ts +85 -0
- package/assets/ts/components/menu/menu.component.ts +2 -2
- package/assets/ts/components/milestone/milestone.component.ts +43 -45
- package/assets/ts/components/milestone-group/milestone-group.component.ts +39 -41
- package/assets/ts/components/multiselect/multiselect.component.ts +6 -15
- package/assets/ts/components/nav/nav.component.ts +8 -15
- package/assets/ts/components/notification/notification.component.ts +1 -5
- package/assets/ts/components/split-button/split-button.component.ts +1 -3
- package/assets/ts/components/word-count/word-count.component.ts +91 -0
- package/assets/ts/components.ts +1 -0
- package/assets/ts/modules/advanced-select.ts +11 -16
- package/assets/ts/modules/data-layer.md +0 -5
- package/assets/ts/modules/dynamicEvents.ts +6 -7
- package/assets/ts/modules/inputs.ts +0 -25
- package/assets/ts/modules/milestone-group.ts +39 -42
- package/assets/ts/modules/milestone.ts +119 -122
- package/assets/ts/scripts.ts +2 -1
- package/dist/components.es.js +1693 -41
- package/dist/components.umd.js +1032 -221
- package/package.json +6 -6
- package/src/components/Accordion/Accordion.vue +14 -23
- package/src/components/Accordion/AccordionItem.vue +27 -43
- package/src/components/Actionbar/Actionbar.vue +17 -19
- package/src/components/AddressLookup/AddressLookup.vue +17 -18
- package/src/components/AdvancedSelect/AdvancedSelect.vue +17 -18
- package/src/components/AppliedFilters/AppliedFilters.vue +16 -18
- package/src/components/Banner/Banner.vue +18 -21
- package/src/components/BarChart/BarChart.vue +17 -18
- package/src/components/Calendar/Calendar.vue +14 -20
- package/src/components/Card/Card.vue +17 -17
- package/src/components/Carousel/Carousel.vue +17 -20
- package/src/components/Content/Content.vue +17 -18
- package/src/components/DarkMode/DarkMode.vue +19 -0
- package/src/components/DoughnutChart/DoughnutChart.vue +17 -18
- package/src/components/FileUpload/FileUpload.vue +22 -28
- package/src/components/FilterCard/FilterCard.vue +17 -18
- package/src/components/Filterlist/Filterlist.vue +17 -0
- package/src/components/Header/Header.vue +28 -29
- package/src/components/InlineEdit/InlineEdit.vue +11 -19
- package/src/components/Menu/Menu.vue +17 -17
- package/src/components/Milestones/Milestone.vue +22 -27
- package/src/components/Milestones/MilestoneGroup.vue +24 -27
- package/src/components/Multiselect/Multiselect.vue +17 -18
- package/src/components/Nav/Nav.vue +17 -19
- package/src/components/Notification/Notification.vue +17 -15
- package/src/components/Pagination/Pagination.vue +16 -16
- package/src/components/Rank/Rank.vue +17 -18
- package/src/components/Rankings/Rankings.vue +17 -27
- package/src/components/RecordCard/RecordCard.vue +17 -18
- package/src/components/Search/Search.vue +17 -17
- package/src/components/Slider/Slider.vue +17 -17
- package/src/components/SplitButton/SplitButton.vue +17 -20
- package/src/components/Tabs/Tabs.vue +17 -17
- package/src/components/VideoCard/VideoCard.vue +17 -18
- package/src/components/WordCount/WordCount.vue +22 -0
- package/src/index.js +43 -44
- package/assets/css/components/address-lookup.css +0 -1
- package/assets/css/components/address-lookup.css.map +0 -1
- package/assets/css/components/menu.css.map +0 -1
- /package/assets/sass/components/{menu.scss → menu.global.scss} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
|
-
*/const
|
|
4
|
+
*/const g=d=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:d})},u=(d,n,r)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:n}),r.forEach(o=>{d.addEventListener(o,function(c){const s={event:o,element:n,target:c.target};Object.keys(c.detail).forEach(p=>{const e=c.detail[p];s[p]=e}),window.dataLayer.push(s)})}),!0),h=`<div class="card__head" part="head">
|
|
5
5
|
<slot name="head"></slot>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="card__badges"><slot name="badges"></slot></div>
|
|
@@ -15,19 +15,25 @@
|
|
|
15
15
|
</div>
|
|
16
16
|
<div class="card__footer" part="footer">
|
|
17
17
|
<slot name="footer"></slot>
|
|
18
|
-
</div>`,
|
|
18
|
+
</div>`,v=d=>{d.classList.add("card");const n=d.shadowRoot.querySelector(".card__head"),r=d.shadowRoot.querySelector(".card__body");d.hasAttribute("data-image")&&(n.innerHTML+=`<img src="${d.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),d.hasAttribute("data-total")?r.insertAdjacentHTML("beforeend",`<div class="card__total">${d.getAttribute("data-total")}</div>`):d.querySelector('[slot="total-icon"]')&&r.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),d.querySelector('[slot="badges"]')?d.shadowRoot.querySelector(".card__badges").classList.remove("empty"):d.shadowRoot.querySelector(".card__badges").classList.add("empty")};class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const r=`@import "${document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets"}/css/components/menu.component.css";`,o=document.createElement("template");o.innerHTML=`
|
|
19
|
+
<style>
|
|
20
|
+
${r}
|
|
21
|
+
</style>
|
|
22
|
+
<div class="menu--inner" part="inner">
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>`,this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){const n=this.hasAttribute("id")?this.getAttribute("id"):!1,r=document.querySelector(`[popovertarget="${n}"]`);let o=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),c=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(c=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),o=c),this.querySelectorAll("details");let s,p;n&&r&&(this.setAttribute("role","menu"),this.style["position-anchor"]=`--${n}`,r?.setAttribute("aria-haspopup","true"),r==null||(r.style["anchor-name"]=`--${n}`),r?.setAttribute("aria-controls",n)),c.forEach((e,t)=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0"),t==0&&e.setAttribute("autofocus",!0)}),this.addEventListener("keydown",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("a, button, summary")){const t=document.activeElement,i=Array.from(o).indexOf(t)-1,l=Array.from(o).indexOf(t)+1;switch(e.keyCode){case 27:t.closest("details")?(e.stopPropagation(),e.preventDefault(),t.closest("details").removeAttribute("open"),t.closest("details").querySelector(":scope summary").focus()):(e.stopPropagation(),r.focus());break;case 32:case 13:break;case 35:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(c)[c.length-1].focus();break;case 36:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(c)[0].focus();break;case 38:if(e.stopPropagation(),e.preventDefault(),Array.from(o).indexOf(t)>-1)Array.from(o)[i]!=null?Array.from(o)[i].focus():Array.from(o)[o.length-1].focus();else if(t.closest("details")){const a=t.closest("details").querySelectorAll("a, button, :scope details > summary");p=Array.from(a).indexOf(t)-1,Array.from(a)[p]!=null?Array.from(a)[p].focus():Array.from(a)[a.length-1].focus()}break;case 40:if(e.stopPropagation(),e.preventDefault(),Array.from(o).indexOf(t)>-1)Array.from(o)[l]!=null?Array.from(o)[l].focus():Array.from(o)[0].focus();else if(t.closest("details")){const a=t.closest("details").querySelectorAll("a, button, :scope details > summary");s=Array.from(a).indexOf(t)+1,Array.from(a)[s]!=null?Array.from(a)[s].focus():Array.from(a)[0].focus()}break}}}),this.addEventListener("toggle",e=>{var t,i,l,a;const m=new CustomEvent(e.newState,{detail:{id:this.getAttribute("id"),target:e.target}});this.dispatchEvent(m),this.closest(".menu__wrapper")&&c[0].focus(),this.hasAttribute("popover-open")&&(e.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((t=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||t===void 0||t.setAttribute("aria-pressed","true"),(i=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||i===void 0||i.classList.add("active")):((l=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||l===void 0||l.removeAttribute("aria-pressed"),(a=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||a===void 0||a.classList.remove("active"))}),this.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("button:has(+ iam-menu:not([popover]))")){const t=e.target.closest("button:has(+ iam-menu)");t?.classList.toggle("open")}else if(e&&e.target instanceof HTMLElement&&e.target.closest("button.selectable")){const t=e.target.closest("button.selectable");this.hasAttribute("multiple")?t.classList.toggle("selected"):t?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(i=>{i.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(i=>{i.classList.remove("selected")}),t.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",e=>{if(e.originalTarget&&e.originalTarget.matches("[popovertarget]")){const t=e.originalTarget,i=t.getAttribute("popovertarget"),l=document.getElementById(i),a=t.getBoundingClientRect(),m=a.top,b=a.left;l.style.setProperty("top",m+"px"),l.style.setProperty("left",b+t.clientWidth+"px")}})}}var y=function(d,n,r,o){function c(s){return s instanceof r?s:new r(function(p){p(s)})}return new(r||(r=Promise))(function(s,p){function e(l){try{i(o.next(l))}catch(a){p(a)}}function t(l){try{i(o.throw(l))}catch(a){p(a)}}function i(l){l.done?s(l.value):c(l.value).then(e,t)}i((o=o.apply(d,n||[])).next())})};g("iam-card");class w extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const n=document.createElement("template");n.innerHTML=`
|
|
19
25
|
<style>
|
|
20
26
|
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
21
27
|
|
|
22
|
-
:host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}dialog[open]{display:flex;flex-direction:column}dialog[open]>*:last-child{margin-bottom:0}dialog[open]>:is(p):last-child{padding-bottom:0}}.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover);filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(bottom) !important;left:anchor(left) !important;position-try-fallbacks:flip-block,flip-inline !important;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:10rem !important;max-width:15rem !important;padding:var(--menu-padding, 0.5rem);margin:0;background:var(--menu-bg, canvas);border:var(--menu-border, 2px solid grey);overflow:auto;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1)}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem;margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{background:unset;border:unset;color:var(--colour-primary);font-weight:inherit;font-family:inherit;font-size:1rem;line-height:1.1875rem;display:block;margin:var(--menu-item-margin, 0 0 0.25rem 0);padding-block:var(--menu-item-padding, 0.5rem);width:var(--menu-item-width, 100%);max-width:var(--menu-item-width, 100%);text-align:var(--menu-item-text-align, left)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:hover,:focus){background:var(--colour-light) !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:active){background:#e0e0e0 !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@media screen and (prefers-color-scheme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide, 0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.menu__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.menu__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
|
|
28
|
+
:host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}dialog[open]{display:flex;flex-direction:column}dialog[open]>*:last-child{margin-bottom:0}dialog[open]>:is(p):last-child{padding-bottom:0}}.dialog__wrapper{position:relative;display:inline-block;margin-bottom:calc(var(--btn-margin) - .25rem)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{background:var(--colour-btn-secondary-bg-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button:not(.btn-action){color:var(--colour-btn-secondary-hover)}.dialog__wrapper:has(dialog[open],dialog:popover-open)>button{filter:brightness(85%);transition:background .1s,color .1s;border-radius:1.5rem}.dialog__wrapper>.btn:first-child:not(.btn-compact):not([class*=fa-]):after{content:"";display:inline-block;margin-left:1em;height:1em;width:1em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.dialog__wrapper>.btn:first-child[aria-expanded]:not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>.btn:first-child:has(+dialog[open]):not([data-number]):after{transform:rotate(270deg)}.dialog__wrapper>[popover]{display:var(--menu-display, none);position:fixed;top:anchor(bottom) !important;left:anchor(left) !important;position-try-fallbacks:flip-block,flip-inline !important;margin:0 0 0 0.25rem;padding:1rem}.dialog__wrapper>[popover]::backdrop{display:none}.dialog__wrapper>[popover]:popover-open{display:block !important}.dialog__wrapper:has([popover]:popover-open)>button{background-color:var(--colour)}.dialog__wrapper>:is(dialog[open],dialog:popover-open){left:0;margin-top:-1rem;top:100%;z-index:var(--index-floating);min-width:20rem;border-radius:1rem;width:20rem;padding:1.5rem}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:20.9375rem}}@media screen and (min-width: 62em){.dialog__wrapper>:is(dialog[open],dialog:popover-open){width:22.5rem}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:fit-content !important;min-width:10rem !important;max-width:15rem !important;padding:var(--menu-padding, 0.5rem);margin:0;background:var(--menu-bg, canvas);border:var(--menu-border, 2px solid grey);overflow:auto;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1)}@media screen and (min-width: 36em){.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list{width:max-content !important}}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list hr{height:1px !important;background-color:var(--menu-hr-border-color, var(--border-color, grey)) !important;width:100%;margin:var(--menu-item-margin, 0 0 0.25rem 0) !important;padding:0 !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick{margin-right:0;padding-left:1.5rem;margin-bottom:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .radio--tick:before{left:0;font-size:1em;top:.75rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{padding:0.375rem}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a{margin:0}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list a:after{display:none}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action{background:unset;border:unset;color:var(--colour-primary);font-weight:inherit;font-family:inherit;font-size:1rem;line-height:1.1875rem;display:block;margin:var(--menu-item-margin, 0 0 0.25rem 0);padding-block:var(--menu-item-padding, 0.5rem);width:var(--menu-item-width, 100%);max-width:var(--menu-item-width, 100%);text-align:var(--menu-item-text-align, left)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:not(:hover,:focus,:active){border-color:rgba(0,0,0,0)}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:hover,:focus){background:var(--colour-light) !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open).dialog--list .btn-action:is(:active){background:#e0e0e0 !important;border-radius:.25rem !important}.dialog__wrapper>:is(dialog[open],dialog:popover-open) :is(dialog[open],dialog:popover-open){display:contents}.dialog__wrapper.dialog__wrapper--right>:is(dialog[open],dialog:popover-open){right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>:is(dialog[open],dialog:popover-open){width:14.9375rem}.dialog__wrapper.dialog__wrapper--lg>:is(dialog[open],dialog:popover-open){width:19.9375rem}@media screen and (min-width: 36em){.dialog__wrapper.dialog__wrapper--sm-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--sm-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.5625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.25rem}}@media screen and (min-width: 62em){.dialog__wrapper.dialog__wrapper--md-left>dialog[open]{left:0;right:auto}.dialog__wrapper.dialog__wrapper--md-right>dialog[open]{right:0;left:auto}.dialog__wrapper.dialog__wrapper--sm>dialog[open]{width:16.625rem}.dialog__wrapper.dialog__wrapper--lg>dialog[open]{width:28.375rem}}.dialog__wrapper :is(.empty,.individual){display:none}@supports selector(:has(*)){.dialog__wrapper :is(.empty,.individual){display:inline}}.dialog__wrapper:has(input:checked) .empty,.dialog__wrapper:not(:has(input:checked)) .individual,.dialog__wrapper:has(input:checked~input:checked) .individual,.dialog__wrapper:not(:has(input:checked~input:checked)) .multiple{display:none}*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact{text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@container style(--theme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}:host{--card-right-padding: 1rem;--card-icon-right: 1rem}:host(:is(:hover,:focus,.hover):not(.prevent-hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px}:host(:is(:active,.active):not(.prevent-hover)){--card-icon-right: var(--card-icon-right-overide, 0.5rem);outline:none}:host(.prevent-hover){pointer-events:none}:host(.prevent-hover) *{pointer-events:all}:host(.show-icon) .card__body{--card-right-padding: 3.5rem}:host(.show-icon) .card__body:before,:host(.show-icon) .card__body:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}:host(.show-icon) .card__body:after{background:var(--colour-primary-theme);mask-image:var(--icon, var(--icon-arrow));mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon, var(--icon-arrow));-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:before{background:var(--hover-icon-bg, var(--colour-primary-theme))}:host(:is(:active,.active):not(.prevent-hover):not([class*=colour-])) .card__body:after{background:var(--hover-icon-colour, #ffffff)}.card__body:has(.card__illustration){align-items:center;display:flex}.card__body:has(.card__illustration) .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card__body:has(.card__illustration) .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}:host([class*=colour-]){border-left:0.75rem solid var(--colour, var(--colour-primary))}slot[name=secondary]{display:block;position:absolute;top:.5rem;right:0;margin:.5rem .5rem 0 0;z-index:999}::slotted([slot=secondary]:not(:hover,:focus,:active,.hover)){background:none !important;color:var(--colour-btn) !important}::slotted([slot=checkbox]){position:absolute !important;top:.5rem;right:.5rem;width:2rem;height:2rem;height:2.5rem;overflow:hidden}.menu__wrapper{position:absolute;right:1rem;bottom:2rem;width:3rem !important;left:auto;z-index:999}.menu__wrapper>.btn:before{content:"\uF142";font-family:"Font Awesome 6 Pro"}::slotted([slot=btns]){border:none !important;margin:0 !important;display:block !important;width:fit-content}::slotted([slot=primary-action]){overflow:hidden;background-color:rgba(0,0,0,0);text-indent:-300%;position:absolute !important;inset:0;margin:0 !important;z-index:99;border:none}:host(:not(.prevent-hover)) ::slotted([slot=primary-action]:is(:hover,:focus,.hover)){--hover-outline-colour-default: var(--colour, var(--colour-primary));outline:2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));outline-offset:-2px;border-radius:var(--card-border-radius) !important}/*# sourceMappingURL=assets/css/components/card.component.css.map */
|
|
23
29
|
|
|
24
30
|
</style>
|
|
25
|
-
${
|
|
31
|
+
${h}
|
|
26
32
|
<slot name="primary-action"></slot>
|
|
27
|
-
`,this.shadowRoot.appendChild(
|
|
33
|
+
`,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){return y(this,void 0,void 0,function*(){var n,r;const o=this,c=o.shadowRoot.querySelector(".card__body");if(document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location"),window.customElements.get("iam-menu")||window.customElements.define("iam-menu",f),v(o),o.hasAttribute("data-illustration")&&c.insertAdjacentHTML("afterbegin",`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`),!o.querySelector('[slot="btns"]')&&!o.querySelector('[slot="secondary"]')&&o.classList.add("show-icon"),o.querySelector('[slot="btns"]')&&(o.shadowRoot.innerHTML+=`<div class="menu__wrapper">
|
|
28
34
|
<button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
|
|
29
35
|
<iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
|
|
30
36
|
<slot name="btns"></slot>
|
|
31
37
|
</iam-menu>
|
|
32
|
-
</div>`,!CSS.supports("top","anchor(top)"))){const
|
|
38
|
+
</div>`,!CSS.supports("top","anchor(top)"))){const t=(n=this.shadowRoot)===null||n===void 0?void 0:n.querySelector('[popovertarget="actions"]'),i=(r=this.shadowRoot)===null||r===void 0?void 0:r.querySelector("[popover]");t?.addEventListener("click",l=>{this.style.setProperty("overflow","visible"),this.style.setProperty("z-index","999999");const a=t.getBoundingClientRect(),m=a.top,b=a.left;i.style.setProperty("display","block"),i.style.setProperty("top",m+"px"),i.style.setProperty("left",b-100+"px")}),document.addEventListener("scroll",l=>{i.style.setProperty("display","none")})}if(Array.from(o.querySelectorAll('[slot="btns"]')).forEach(t=>{t.classList.add("btn"),t.classList.add("btn-action")}),o.querySelector('[slot="checkbox"],[slot="secondary"]')){const t=o.querySelector('[slot="checkbox"],[slot="secondary"]');t.addEventListener("mouseenter",()=>{o.classList.add("prevent-hover")}),t.addEventListener("mouseleave",()=>{o.classList.remove("prevent-hover")})}if(o.shadowRoot.querySelector(".menu__wrapper")){const t=o.shadowRoot.querySelector(".menu__wrapper");t.addEventListener("mouseenter",()=>{o.classList.add("prevent-hover")}),t.addEventListener("mouseleave",()=>{o.classList.remove("prevent-hover")})}const s=o.querySelector('input[type="checkbox"]');s&&s.addEventListener("change",()=>{if(s.checked){const t=new CustomEvent("select-card",{detail:{"Card value":s.value,"input name":s.getAttribute("name")}});o.dispatchEvent(t)}else{const t=new CustomEvent("unselect-card",{detail:{"Card value":s.value,"input name":s.getAttribute("name")}});o.dispatchEvent(t)}});const p=o.querySelector('[slot="secondary"]');p&&p.addEventListener("click",()=>{const t=new CustomEvent("secondary-button-clicked",{detail:{Title:p.getAttribute("title")}});o.dispatchEvent(t)});const e=o.querySelectorAll('[slot="btns"]');Array.from(e).forEach(t=>{t.addEventListener("click",()=>{const i=new CustomEvent("action-button-clicked",{detail:{Title:t.getAttribute("title")}});o.dispatchEvent(i)})}),u(o,"iam-card",["select-card","unselect-card","secondary-button-clicked","action-button-clicked"])})}static get observedAttributes(){return["data-image"]}attributeChangedCallback(n,r,o){switch(n){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=o);break}case"data-image":{if(r!=o){const c=this.shadowRoot.querySelector(".card__head img");c&&c.setAttribute("src",o)}break}}}}export{w as default};
|
|
33
39
|
//# sourceMappingURL=card.component.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n }\n else {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\ntrackComponentRegistered('iam-card');\nclass iamCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n ${cardHTML}\n <slot name=\"primary-action\"></slot>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n var _a, _b;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n if (!window.customElements.get(`iam-menu`)) {\n import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)\n .then((module) => {\n window.customElements.define(`iam-menu`, module.default);\n })\n .catch((err) => {\n console.log(err.message);\n });\n }\n setupCard(cardComponent);\n // Add Illustration HTML\n if (cardComponent.hasAttribute('data-illustration')) {\n cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n }\n // Add class that shows the right arrow icon\n if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n cardComponent.classList.add('show-icon');\n }\n // Secondary buttons and actions\n // Add the dialog wrapper HTML\n if (cardComponent.querySelector('[slot=\"btns\"]')) {\n cardComponent.shadowRoot.innerHTML += `<div class=\"menu__wrapper\">\n <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical m-0\" popovertarget=\"actions\" style=\"anchor-name: --anchor-el;\" title=\"Further actions\" type=\"button\">Open further actions</button>\n <iam-menu class=\"dialog--fix dialog--list\" id=\"actions\" style=\"position-anchor: --anchor-el;\" popover>\n <slot name=\"btns\"></slot>\n </iam-menu>\n </div>`;\n // safari and firefox anchor fix for cards\n if (!CSS.supports('top', 'anchor(top)')) {\n const actionButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popovertarget=\"actions\"]');\n const actionPopover = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[popover]');\n actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', (event) => {\n this.style.setProperty('overflow', 'visible');\n this.style.setProperty('z-index', '999999');\n const viewportOffset = actionButton.getBoundingClientRect();\n const top = viewportOffset.top;\n const left = viewportOffset.left;\n actionPopover.style.setProperty('display', 'block');\n actionPopover.style.setProperty('top', top + 'px');\n actionPopover.style.setProperty('left', left - 100 + 'px');\n });\n document.addEventListener('scroll', (event) => {\n actionPopover.style.setProperty('display', 'none');\n });\n }\n }\n // Make sure slotted buttons and links have correct button classes\n Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button) => {\n button.classList.add('btn');\n button.classList.add('btn-action');\n });\n // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n element.addEventListener('mouseenter', () => {\n cardComponent.classList.add('prevent-hover');\n });\n element.addEventListener('mouseleave', () => {\n cardComponent.classList.remove('prevent-hover');\n });\n }\n if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {\n const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');\n element.addEventListener('mouseenter', () => {\n cardComponent.classList.add('prevent-hover');\n });\n element.addEventListener('mouseleave', () => {\n cardComponent.classList.remove('prevent-hover');\n });\n }\n // Dispatch events of selecting checkboxes\n const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.addEventListener('change', () => {\n if (checkbox.checked) {\n const customEvent = new CustomEvent('select-card', {\n detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n });\n cardComponent.dispatchEvent(customEvent);\n }\n else {\n const customEvent = new CustomEvent('unselect-card', {\n detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n });\n cardComponent.dispatchEvent(customEvent);\n }\n });\n }\n // Dispatch events of click onto secondary buttons\n const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n if (secondaryBtn) {\n secondaryBtn.addEventListener('click', () => {\n const customEvent = new CustomEvent('secondary-button-clicked', {\n detail: { Title: secondaryBtn.getAttribute('title') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n // Dispatch events of click onto action buttons\n const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n Array.from(actionBtns).forEach((button) => {\n button.addEventListener('click', () => {\n const customEvent = new CustomEvent('action-button-clicked', {\n detail: { Title: button.getAttribute('title') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n });\n trackComponent(cardComponent, 'iam-card', [\n 'select-card',\n 'unselect-card',\n 'secondary-button-clicked',\n 'action-button-clicked',\n ]);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (this.shadowRoot.querySelector('.card__total'))\n this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n break;\n }\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","template","_a","_b","assetLocation","module","err","actionButton","actionPopover","viewportOffset","top","left","button","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../menu/menu.component.js","card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n }\n else {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n }\n};\n","class iamMenu extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const menuCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${menuCSS}\n </style>\n <div class=\"menu--inner\" part=\"inner\">\n <slot></slot>\n </div>`;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n let menuItems = this.querySelectorAll('a, button');\n if (this.closest('.menu__wrapper')) {\n menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });\n topLevelmenuItems = menuItems;\n }\n const subMenus = this.querySelectorAll('details');\n let subNextIndex;\n let subPrevIndex;\n // Set the needed CSS styles to connect the ID attribute to the anchor name\n if (menuID && menuButton) {\n this.setAttribute('role', 'menu');\n this.style['position-anchor'] = `--${menuID}`;\n menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n }\n menuItems.forEach((item, index) => {\n item.setAttribute('role', 'menuitem');\n item.setAttribute('tabindex', '0');\n if (index == 0) {\n item.setAttribute('autofocus', true);\n }\n });\n this.addEventListener('keydown', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n const activeItem = document.activeElement;\n const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n switch (event.keyCode // change to event.key to key to use the above variable\n ) {\n case 27: // Esc\n if (activeItem.closest('details')) {\n event.stopPropagation();\n event.preventDefault();\n activeItem.closest('details').removeAttribute('open');\n activeItem.closest('details').querySelector(':scope summary').focus();\n }\n else {\n event.stopPropagation();\n menuButton.focus();\n }\n break;\n case 32: // Space\n case 13: // Enter\n break;\n case 35: // end\n event.stopPropagation();\n event.preventDefault();\n this.querySelector('details[open]').removeAttribute('open');\n Array.from(menuItems)[menuItems.length - 1].focus();\n break;\n case 36: // home\n event.stopPropagation();\n event.preventDefault();\n this.querySelector('details[open]').removeAttribute('open');\n Array.from(menuItems)[0].focus();\n break;\n case 38: // up\n event.stopPropagation();\n event.preventDefault();\n if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n Array.from(topLevelmenuItems)[prevIndex].focus();\n else\n Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n }\n else if (activeItem.closest('details')) {\n const subMenuItems = activeItem\n .closest('details')\n .querySelectorAll('a, button, :scope details > summary');\n subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n Array.from(subMenuItems)[subPrevIndex].focus();\n else\n Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n }\n break;\n case 40: // down\n event.stopPropagation();\n event.preventDefault();\n if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n Array.from(topLevelmenuItems)[nextIndex].focus();\n else\n Array.from(topLevelmenuItems)[0].focus();\n }\n else if (activeItem.closest('details')) {\n const subMenuItems = activeItem\n .closest('details')\n .querySelectorAll('a, button, :scope details > summary');\n subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n if (Array.from(subMenuItems)[subNextIndex] != undefined)\n Array.from(subMenuItems)[subNextIndex].focus();\n else\n Array.from(subMenuItems)[0].focus();\n }\n break;\n }\n }\n });\n this.addEventListener('toggle', (e) => {\n var _a, _b, _c, _d;\n const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });\n this.dispatchEvent(updateEvent);\n // Fix the focus\n if (this.closest('.menu__wrapper')) {\n menuItems[0].focus();\n }\n if (this.hasAttribute('popover-open')) {\n e.preventDefault();\n this.removeAttribute('popover-open');\n this.hidePopover();\n }\n if (this.matches(':popover-open') && document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) {\n (_a = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');\n (_b = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _b === void 0 ? void 0 : _b.classList.add('active');\n }\n else {\n (_c = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-pressed');\n (_d = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _d === void 0 ? void 0 : _d.classList.remove('active');\n }\n });\n this.addEventListener('click', (event) => {\n if (event &&\n event.target instanceof HTMLElement &&\n event.target.closest('button:has(+ iam-menu:not([popover]))')) {\n const button = event.target.closest('button:has(+ iam-menu)');\n button === null || button === void 0 ? void 0 : button.classList.toggle('open');\n }\n else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {\n const button = event.target.closest('button.selectable');\n if (this.hasAttribute('multiple')) {\n button.classList.toggle('selected');\n }\n else if (button === null || button === void 0 ? void 0 : button.classList.contains('selected')) {\n this.querySelectorAll('.selected').forEach((item) => {\n item.classList.remove('selected');\n });\n }\n else {\n this.querySelectorAll('.selected').forEach((item) => {\n item.classList.remove('selected');\n });\n button.classList.add('selected');\n }\n }\n });\n // safari and firefox anchor fix for cards\n if (!CSS.supports('top', 'anchor(top)')) {\n document.addEventListener('click', (event) => {\n if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {\n const button = event.originalTarget;\n const popoverID = button.getAttribute('popovertarget');\n const popover = document.getElementById(popoverID);\n const viewportOffset = button.getBoundingClientRect();\n const top = viewportOffset.top;\n const left = viewportOffset.left;\n popover.style.setProperty('top', top + 'px');\n popover.style.setProperty('left', left + button.clientWidth + 'px');\n }\n });\n }\n }\n}\nexport default iamMenu;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\nimport iamMenu from '../menu/menu.component.js';\ntrackComponentRegistered('iam-card');\nclass iamCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n ${cardHTML}\n <slot name=\"primary-action\"></slot>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n var _a, _b;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n if (!window.customElements.get(`iam-menu`))\n window.customElements.define(`iam-menu`, iamMenu);\n setupCard(cardComponent);\n // Add Illustration HTML\n if (cardComponent.hasAttribute('data-illustration')) {\n cardBody.insertAdjacentHTML('afterbegin', `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>`);\n }\n // Add class that shows the right arrow icon\n if (!cardComponent.querySelector('[slot=\"btns\"]') && !cardComponent.querySelector('[slot=\"secondary\"]')) {\n cardComponent.classList.add('show-icon');\n }\n // Secondary buttons and actions\n // Add the dialog wrapper HTML\n if (cardComponent.querySelector('[slot=\"btns\"]')) {\n cardComponent.shadowRoot.innerHTML += `<div class=\"menu__wrapper\">\n <button class=\"btn btn-secondary btn-compact fa-ellipsis-vertical m-0\" popovertarget=\"actions\" style=\"anchor-name: --anchor-el;\" title=\"Further actions\" type=\"button\">Open further actions</button>\n <iam-menu class=\"dialog--fix dialog--list\" id=\"actions\" style=\"position-anchor: --anchor-el;\" popover>\n <slot name=\"btns\"></slot>\n </iam-menu>\n </div>`;\n // safari and firefox anchor fix for cards\n if (!CSS.supports('top', 'anchor(top)')) {\n const actionButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[popovertarget=\"actions\"]');\n const actionPopover = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[popover]');\n actionButton === null || actionButton === void 0 ? void 0 : actionButton.addEventListener('click', (event) => {\n this.style.setProperty('overflow', 'visible');\n this.style.setProperty('z-index', '999999');\n const viewportOffset = actionButton.getBoundingClientRect();\n const top = viewportOffset.top;\n const left = viewportOffset.left;\n actionPopover.style.setProperty('display', 'block');\n actionPopover.style.setProperty('top', top + 'px');\n actionPopover.style.setProperty('left', left - 100 + 'px');\n });\n document.addEventListener('scroll', (event) => {\n actionPopover.style.setProperty('display', 'none');\n });\n }\n }\n // Make sure slotted buttons and links have correct button classes\n Array.from(cardComponent.querySelectorAll('[slot=\"btns\"]')).forEach((button) => {\n button.classList.add('btn');\n button.classList.add('btn-action');\n });\n // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button\n if (cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]')) {\n const element = cardComponent.querySelector('[slot=\"checkbox\"],[slot=\"secondary\"]');\n element.addEventListener('mouseenter', () => {\n cardComponent.classList.add('prevent-hover');\n });\n element.addEventListener('mouseleave', () => {\n cardComponent.classList.remove('prevent-hover');\n });\n }\n if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {\n const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');\n element.addEventListener('mouseenter', () => {\n cardComponent.classList.add('prevent-hover');\n });\n element.addEventListener('mouseleave', () => {\n cardComponent.classList.remove('prevent-hover');\n });\n }\n // Dispatch events of selecting checkboxes\n const checkbox = cardComponent.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.addEventListener('change', () => {\n if (checkbox.checked) {\n const customEvent = new CustomEvent('select-card', {\n detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n });\n cardComponent.dispatchEvent(customEvent);\n }\n else {\n const customEvent = new CustomEvent('unselect-card', {\n detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },\n });\n cardComponent.dispatchEvent(customEvent);\n }\n });\n }\n // Dispatch events of click onto secondary buttons\n const secondaryBtn = cardComponent.querySelector('[slot=\"secondary\"]');\n if (secondaryBtn) {\n secondaryBtn.addEventListener('click', () => {\n const customEvent = new CustomEvent('secondary-button-clicked', {\n detail: { Title: secondaryBtn.getAttribute('title') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n }\n // Dispatch events of click onto action buttons\n const actionBtns = cardComponent.querySelectorAll('[slot=\"btns\"]');\n Array.from(actionBtns).forEach((button) => {\n button.addEventListener('click', () => {\n const customEvent = new CustomEvent('action-button-clicked', {\n detail: { Title: button.getAttribute('title') },\n });\n cardComponent.dispatchEvent(customEvent);\n });\n });\n trackComponent(cardComponent, 'iam-card', [\n 'select-card',\n 'unselect-card',\n 'secondary-button-clicked',\n 'action-button-clicked',\n ]);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (this.shadowRoot.querySelector('.card__total'))\n this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n break;\n }\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","iamMenu","menuCSS","template","menuID","menuButton","topLevelmenuItems","menuItems","subNextIndex","subPrevIndex","item","index","activeItem","prevIndex","nextIndex","subMenuItems","_a","_b","_c","_d","updateEvent","button","popoverID","popover","viewportOffset","top","left","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamCard","actionButton","actionPopover","element","checkbox","customEvent","secondaryBtn","actionBtns","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
|
|
@@ -10,34 +10,32 @@ class iamCarousel extends HTMLElement {
|
|
|
10
10
|
: '/assets';
|
|
11
11
|
const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
|
|
12
12
|
const template = document.createElement('template');
|
|
13
|
-
template.innerHTML = `
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
template.innerHTML = /* HTML */ `
|
|
14
|
+
<style>
|
|
15
|
+
${loadCSS}
|
|
16
|
+
${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
|
|
17
|
+
</style>
|
|
18
|
+
<div class="carousel" part="carousel">
|
|
19
|
+
<div class="carousel__wrapper">
|
|
20
|
+
<div class="carousel__inner">
|
|
21
|
+
<div class="carousel__content" part="content">
|
|
22
|
+
<slot></slot>
|
|
23
|
+
</div>
|
|
23
24
|
</div>
|
|
24
25
|
</div>
|
|
25
|
-
|
|
26
|
-
</div>
|
|
27
26
|
<div class="carousel__btns" part="btns">
|
|
28
|
-
<button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled
|
|
27
|
+
<button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
|
|
28
|
+
Prev
|
|
29
|
+
</button>
|
|
29
30
|
<button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
|
|
30
31
|
</div>
|
|
31
32
|
|
|
32
|
-
<div class="carousel__controls" part="controls">
|
|
33
|
-
|
|
34
|
-
</div>
|
|
33
|
+
<div class="carousel__controls" part="controls"></div>
|
|
35
34
|
|
|
36
35
|
<div class="carousel__progress" part="progress">
|
|
37
|
-
<input type="range" min="0" max="100" value="1" step="1"
|
|
36
|
+
<input type="range" min="0" max="100" value="1" step="1" />
|
|
38
37
|
</div>
|
|
39
|
-
|
|
40
|
-
</div>
|
|
38
|
+
</div>
|
|
41
39
|
`;
|
|
42
40
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
43
41
|
}
|
|
@@ -1,34 +1,32 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.
|
|
2
|
+
* iamKey v7.5.0
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/const M=function(e){const t=[];return Array.from(e.querySelectorAll(":scope > div")).forEach((n,o)=>{n.hasAttribute("data-thumbnail")&&(t[o]=n.getAttribute("data-thumbnail"))}),t},W=function(e,t){const n=e.querySelectorAll(":scope > div").length;let o="";for(let a=1;a<=n;a++){let r=null,s="";t.length&&t[a-1]?(s="has-thumbnail",r=`<img src="${t[a-1]}" alt="Slide ${a}" height="148"/>`):r=`Slide ${a}`,o+=`<button class="control-${a} ${s}" data-slide="${a}" ${a==1?"aria-current":""}>${r}</button>`}return o},x=function(e,t){return t==1?e:Math.ceil(e/t)*t-t+1},z=function(e,t){return(e-1)/(t-1)*100},$=function(e){let t;const n=e.shadowRoot.querySelector(".carousel"),o=n.querySelector(".carousel__inner"),a=n.querySelector(".carousel__controls"),r=n.querySelector('.carousel__progress [type="range"]'),s=e.querySelectorAll(":scope > div").length;let p=o.clientWidth,y=e.querySelector(":scope > div").scrollWidth,v=Math.round(p/y);r.setAttribute("min",1),r.setAttribute("step",v);let h=x(s,v);r.setAttribute("max",h),r.value=1;let b=z(1,h);r.style.setProperty("--percent",b+"%");let f,A="mouseup",L="mousedown";"ontouchstart"in document.documentElement&&(A="touchend",L="touchstart"),o.addEventListener("scroll",function(){clearTimeout(t),t=setTimeout(function(){const c=o.clientWidth,i=o.scrollWidth,m=o.scrollLeft;let l=Math.round(m/i*s)+1;const g=e.querySelector(":scope > div").scrollWidth,w=e.querySelector(":scope > div:last-child").offsetLeft,_=o.scrollLeft+c+o.getBoundingClientRect().left>=w+60,u=Math.round(c/g),k=Math.ceil(s/u)*u-s;r.setAttribute("step",u),k>0&&_&&(l=Math.floor(s/u)*u+1),Array.from(n.querySelectorAll(".carousel__controls button")).forEach(d=>{d.removeAttribute("aria-current")}),n.querySelector(".control-"+l).setAttribute("aria-current",!0),l==1?n.querySelector(".btn-prev").setAttribute("disabled","disabled"):n.querySelector(".btn-prev").removeAttribute("disabled"),l>s-u?n.querySelector(".btn-next").setAttribute("disabled","disabled"):n.querySelector(".btn-next").removeAttribute("disabled"),r.value=l,h=x(s,u),r.setAttribute("max",h),b=l/h*100,b=z(l,h),r.style.setProperty("--percent",b+"%")},100)},!1),a.addEventListener("click",function(c){for(let i=c.target;i&&i!=this;i=i.parentNode)if(typeof i.matches=="function"&&i.matches("button")){c.preventDefault(),Array.from(a.querySelectorAll("button")).forEach(g=>{g.removeAttribute("aria-current")}),i.setAttribute("aria-current",!0);const m=new CustomEvent("pip-clicked",{detail:{slide:i.getAttribute("data-slide")}});e.dispatchEvent(m);const l=e.querySelector(`:scope > *:nth-child(${i.getAttribute("data-slide")})`);o.scroll({top:0,left:l.offsetLeft-o.getBoundingClientRect().left,behavior:"smooth"});break}},!1),n.addEventListener("click",function(c){const i=o.clientWidth,m=e.querySelector(":scope > div").scrollWidth,l=Math.round(i/m),g=e.querySelector(":scope > div:last-child").offsetLeft,w=o.scrollLeft+i+o.getBoundingClientRect().left>=g+60,_=Math.ceil(s/l)*l-s,u=l-_,k=w&&_>0?u*m:o.clientWidth;for(let d=c.target;d&&d!=this;d=d.parentNode)if(typeof d.matches=="function"&&d.matches(".btn-next, .btn-prev")){const S=d.matches(".btn-next")?"next":"prev",E=new CustomEvent(`${S}-clicked`,{detail:{slide:d.getAttribute("data-go")}});e.dispatchEvent(E),c.preventDefault();const q=d.classList.contains("btn-prev")?o.scrollLeft-k:o.scrollLeft+o.clientWidth;o.scroll({top:0,left:q,behavior:"smooth"});break}},!1),r.addEventListener(L,function(){clearInterval(f),f=setInterval(function(){p=o.clientWidth,y=e.querySelector(":scope > div").scrollWidth,v=Math.round(p/y),r.setAttribute("step",v),h=x(s,v),r.setAttribute("max",h),b=z(r.value,h),r.style.setProperty("--percent",b+"%")},10)}),r.addEventListener(A,function(){clearInterval(f)}),r.addEventListener("change",function(){clearInterval(f);const c=e.querySelector(`:scope > *:nth-child(${r.value})`);o.scroll({top:0,left:c?c.offsetLeft-o.getBoundingClientRect().left:0,behavior:"smooth"});const i=new CustomEvent("slider-changed",{detail:{slide:r.value}});e.dispatchEvent(i)},!1)},P=e=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:e})},I=(e,t,n)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),n.forEach(o=>{e.addEventListener(o,function(a){const r={event:o,element:t,target:a.target};Object.keys(a.detail).forEach(s=>{const p=a.detail[s];r[s]=p}),window.dataLayer.push(r)})}),!0);P("iam-carousel");class C extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
|
|
5
|
-
|
|
6
|
-
@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem;border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@media screen and (prefers-color-scheme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::before,*::after{box-sizing:border-box}:host{display:block;overflow:visible;container-type:inline-size}.carousel{margin-inline:calc(var(--carousel-spacing, 1.5rem)*-1);margin-bottom:2rem;display:block;overflow:visible}.carousel .carousel__wrapper{position:relative;overflow-x:clip}.carousel .carousel__inner{--gutter-x: 1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}.carousel .carousel__content{display:flex;flex-wrap:nowrap !important;margin-inline-end:0;padding-inline-start:var(--carousel-spacing, 1.5rem);padding-inline-end:var(--carousel-spacing, 1.5rem);margin-right:calc(-0.5*var(--gutter-x));margin-left:calc(-0.5*var(--gutter-x))}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}::slotted(div){scroll-snap-align:start;scroll-margin-left:calc(var(--carousel-spacing, 1.5rem) - .5rem);flex-shrink:0;width:calc(100% + var(--last-item-extra, 0px));padding-right:.5rem;padding-left:.5rem;margin-top:var(--gutter-y)}::slotted(div:last-child){padding-inline-end:1.5rem;--last-item-extra: 1rem}@container (min-width: 36em){.carousel{margin-inline:calc(var(--carousel-spacing, 2.5rem)*-1)}.carousel .carousel__content{padding-inline-start:var(--carousel-spacing, 2.5rem);padding-inline-end:var(--carousel-spacing, 2.5rem)}:host([data-smcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-smcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-smcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-smcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-smcols="2"]) ::slotted(div:nth-child(odd)),:host([data-smcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-smcols="4"]) ::slotted(div:nth-child(4n+1)){scroll-snap-align:start}::slotted(div){scroll-margin-left:calc(var(--carousel-spacing, 2.5rem) - .5rem)}::slotted(div:last-child){padding-inline-end:2.5rem;--last-item-extra: 2rem}}@container (min-width: 62em){.carousel{margin-inline:0;position:relative}.carousel__wrapper{overflow:hidden;margin-inline:-0.5rem}.carousel__content{padding-inline:0 !important;margin-inline:0 !important}::slotted(div){margin-left:0;scroll-margin-left:0}::slotted(div:last-child){padding-inline-end:.5rem;--last-item-extra: 0px}:host([data-mdcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-mdcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-mdcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-mdcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-mdcols="5"]) ::slotted(div){width:calc(20% + var(--last-item-extra, 0px))}:host([data-mdcols="6"]) ::slotted(div){width:calc(16.6666666667% + var(--last-item-extra, 0px))}:host([data-mdcols="2"]) ::slotted(div:nth-child(odd)),:host([data-mdcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-mdcols="4"]) ::slotted(div:nth-child(4n+1)),:host([data-mdcols="5"]) ::slotted(div:nth-child(5n+1)),:host([data-mdcols="6"]) ::slotted(div:nth-child(6n+1)){scroll-snap-align:start}}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.carousel__btns{text-align:center;padding-bottom:.5rem}.btn-next,.btn-prev{margin:0 !important}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-prev:after{transform:rotate(180deg)}@container (min-width: 62em){.carousel__btns{padding-bottom:0}.btn-prev{position:absolute;top:50%;left:0;margin:-2rem 0 0 -3rem !important}.btn-next{position:absolute;top:50%;right:0;margin:-2rem -3rem 0 0 !important}}.carousel .carousel__controls{overflow:hidden;margin-inline:auto;margin-bottom:1rem;text-align:center;max-width:30rem}@container (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{padding:0;margin:0 .2rem .2rem;border:none}.carousel .carousel__controls button{width:0.5rem;height:0.5rem;min-height:0.5rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:#a5ecfd;margin-inline:0.375rem;cursor:pointer;border:none}.carousel .carousel__controls button:hover{background-color:var(--colour-info)}.carousel .carousel__controls button:before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{--colour-active-thumbnail: var(--colour-info);border-color:var(--colour-active-thumbnail);background:var(--colour-info);width:1rem;height:1rem;min-height:1rem;margin-inline:0.125rem}.carousel__controls>button[aria-current]:hover{background:var(--colour-info)}.carousel__progress{text-align:center;margin-bottom:1rem;display:none}input[type=range]{--track-size: 0.5rem;--track-colour: #a5ecfd;--thumb-colour: var(--colour-info);--thumb-size: 1rem;--thumb-size-outline: 0rem;width:90%;max-width:10.75rem;background:rgba(0,0,0,0);cursor:pointer;margin:0;height:1rem;border-radius:50%;accent-color:var(--thumb-colour);-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-moz-range-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-0.25rem;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]::-moz-range-thumb{border:none;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]:focus{outline:none}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:active::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:hover::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}.carousel__btns:has(~.carousel__controls button:first-child:nth-child(1):last-child){display:none}.carousel__controls:has(button:nth-child(5)){display:none}.carousel__controls:has(button:nth-child(5))~.carousel__progress{display:block}@container (min-width: 36em){:host([data-smcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-smcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-smcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-smcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-smcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)){display:none}:host([data-smcols]) .carousel__controls{display:block}:host([data-smcols]) .carousel__controls~.carousel__progress{display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress{display:block}}@container (min-width: 62em){:host([data-mdcols]) .carousel__controls>button{display:inline-block !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-mdcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-mdcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)),:host([data-mdcols="5"]) .carousel__controls>button:not(:nth-child(5n+1)),:host([data-mdcols="6"]) .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-mdcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-mdcols="5"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),:host([data-mdcols="6"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),:host([data-mdcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)) :host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(6)){display:none !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols]) .carousel__controls~.carousel__progress{display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20)),:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25)),:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress,:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25))~.carousel__progress,:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30))~.carousel__progress{display:block !important}}:host(.hide-btns) .carousel__btns,:host(.hide-controls) .carousel__controls{display:none}:host(.thumbnails) .carousel__controls{display:flex !important;flex-wrap:wrap;max-width:100%;overflow:visible}:host(.thumbnails) .carousel__controls button{padding:0;margin:0 .2rem .4rem;width:6rem;height:auto;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);border-radius:0;position:relative;border-radius:0.25rem}:host(.thumbnails) .carousel__controls button img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;margin:0}:host(.thumbnails) .carousel__controls button[aria-current]{outline:2px solid var(--colour-info)}:host(.thumbnails) .carousel .carousel__btns{padding-bottom:.5rem}:host(.thumbnails) .carousel .btn-next,:host(.thumbnails) .carousel .btn-prev{position:relative;margin:0 !important}:host(.thumbnails) .carousel .carousel__progress{display:none !important}::slotted(div.image__wrapper){width:100%;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);position:relative}/*# sourceMappingURL=assets/css/components/carousel.component.css.map */
|
|
5
|
+
<style>
|
|
6
|
+
@layer elements{*,*::before,*::after{box-sizing:border-box}button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[role=button]{cursor:pointer}button:focus:not(:focus-visible){outline:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 0.125rem;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select):not(.mw-100){max-width:13rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:bold;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact{text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@container style(--theme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*::before,*::after{box-sizing:border-box}:host{display:block;overflow:visible;container-type:inline-size}.carousel{margin-inline:calc(var(--carousel-spacing, 1.5rem)*-1);margin-bottom:2rem;display:block;overflow:visible}.carousel .carousel__wrapper{position:relative;overflow-x:clip}.carousel .carousel__inner{--gutter-x: 1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}.carousel .carousel__content{display:flex;flex-wrap:nowrap !important;margin-inline-end:0;padding-inline-start:var(--carousel-spacing, 1.5rem);padding-inline-end:var(--carousel-spacing, 1.5rem);margin-right:calc(-0.5*var(--gutter-x));margin-left:calc(-0.5*var(--gutter-x))}.carousel .col>*:last-child{margin-bottom:0;padding-bottom:0}::slotted(div){scroll-snap-align:start;scroll-margin-left:calc(var(--carousel-spacing, 1.5rem) - .5rem);flex-shrink:0;width:calc(100% + var(--last-item-extra, 0px));padding-right:.5rem;padding-left:.5rem;margin-top:var(--gutter-y)}::slotted(div:last-child){padding-inline-end:1.5rem;--last-item-extra: 1rem}@container (min-width: 36em){.carousel{margin-inline:calc(var(--carousel-spacing, 2.5rem)*-1)}.carousel .carousel__content{padding-inline-start:var(--carousel-spacing, 2.5rem);padding-inline-end:var(--carousel-spacing, 2.5rem)}:host([data-smcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-smcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-smcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-smcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-smcols="2"]) ::slotted(div:nth-child(odd)),:host([data-smcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-smcols="4"]) ::slotted(div:nth-child(4n+1)){scroll-snap-align:start}::slotted(div){scroll-margin-left:calc(var(--carousel-spacing, 2.5rem) - .5rem)}::slotted(div:last-child){padding-inline-end:2.5rem;--last-item-extra: 2rem}}@container (min-width: 62em){.carousel{margin-inline:0;position:relative}.carousel__wrapper{overflow:hidden;margin-inline:-0.5rem}.carousel__content{padding-inline:0 !important;margin-inline:0 !important}::slotted(div){margin-left:0;scroll-margin-left:0}::slotted(div:last-child){padding-inline-end:.5rem;--last-item-extra: 0px}:host([data-mdcols]) ::slotted(div){scroll-snap-align:unset;flex:0 0 auto}:host([data-mdcols="2"]) ::slotted(div){width:calc(50% + var(--last-item-extra, 0px))}:host([data-mdcols="3"]) ::slotted(div){width:calc(33.3333333333% + var(--last-item-extra, 0px))}:host([data-mdcols="4"]) ::slotted(div){width:calc(25% + var(--last-item-extra, 0px))}:host([data-mdcols="5"]) ::slotted(div){width:calc(20% + var(--last-item-extra, 0px))}:host([data-mdcols="6"]) ::slotted(div){width:calc(16.6666666667% + var(--last-item-extra, 0px))}:host([data-mdcols="2"]) ::slotted(div:nth-child(odd)),:host([data-mdcols="3"]) ::slotted(div:nth-child(3n+1)),:host([data-mdcols="4"]) ::slotted(div:nth-child(4n+1)),:host([data-mdcols="5"]) ::slotted(div:nth-child(5n+1)),:host([data-mdcols="6"]) ::slotted(div:nth-child(6n+1)){scroll-snap-align:start}}.carousel__inner{scrollbar-width:none;-ms-overflow-style:none}.carousel__inner::-webkit-scrollbar{display:none}.carousel__btns{text-align:center;padding-bottom:.5rem}.btn-next,.btn-prev{margin:0 !important}.btn-next:after,.btn-prev:after{content:"";position:absolute;right:0;top:0;height:100%;width:100%;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 60%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:55% 50%;transform:rotate(0deg)}.btn-prev:after{transform:rotate(180deg)}@container (min-width: 62em){.carousel__btns{padding-bottom:0}.btn-prev{position:absolute;top:50%;left:0;margin:-2rem 0 0 -3rem !important}.btn-next{position:absolute;top:50%;right:0;margin:-2rem -3rem 0 0 !important}}.carousel .carousel__controls{overflow:hidden;margin-inline:auto;margin-bottom:1rem;text-align:center;max-width:30rem}@container (min-width: 36em){.carousel .carousel__controls{width:100%}}.carousel .carousel__controls button{padding:0;margin:0 .2rem .2rem;border:none}.carousel .carousel__controls button{width:0.5rem;height:0.5rem;min-height:0.5rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:#a5ecfd;margin-inline:0.375rem;cursor:pointer;border:none}.carousel .carousel__controls button:hover{background-color:var(--colour-info)}.carousel .carousel__controls button:before{display:none}.carousel .carousel__controls button:first-child:last-child{display:none}.carousel__controls>button[aria-current]{--colour-active-thumbnail: var(--colour-info);border-color:var(--colour-active-thumbnail);background:var(--colour-info);width:1rem;height:1rem;min-height:1rem;margin-inline:0.125rem}.carousel__controls>button[aria-current]:hover{background:var(--colour-info)}.carousel__progress{text-align:center;margin-bottom:1rem;display:none}input[type=range]{--track-size: 0.5rem;--track-colour: #a5ecfd;--thumb-colour: var(--colour-info);--thumb-size: 1rem;--thumb-size-outline: 0rem;width:90%;max-width:10.75rem;background:rgba(0,0,0,0);cursor:pointer;margin:0;height:1rem;border-radius:50%;accent-color:var(--thumb-colour);-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-moz-range-track{background:var(--track-colour);height:var(--track-size);border-radius:0.5625rem}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) calc(var(--percent, 0%)), var(--track-colour) calc(var(--percent, 0%)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-0.25rem;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]::-moz-range-thumb{border:none;background-color:var(--thumb-colour);height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;position:relative;z-index:99;pointer-events:all}input[type=range]:focus{outline:none}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:active::-webkit-slider-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:hover::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}input[type=range]:focus::-moz-range-thumb{outline:var(--thumb-size-outline) solid var(--thumb-colour)}.carousel__btns:has(~.carousel__controls button:first-child:nth-child(1):last-child){display:none}.carousel__controls:has(button:nth-child(5)){display:none}.carousel__controls:has(button:nth-child(5))~.carousel__progress{display:block}@container (min-width: 36em){:host([data-smcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-smcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-smcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-smcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-smcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-smcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)){display:none}:host([data-smcols]) .carousel__controls{display:block}:host([data-smcols]) .carousel__controls~.carousel__progress{display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20)){display:none}:host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress{display:block}}@container (min-width: 62em){:host([data-mdcols]) .carousel__controls>button{display:inline-block !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols="2"]) .carousel__controls>button:not(:nth-child(odd)),:host([data-mdcols="3"]) .carousel__controls>button:not(:nth-child(3n+1)),:host([data-mdcols="4"]) .carousel__controls>button:not(:nth-child(4n+1)),:host([data-mdcols="5"]) .carousel__controls>button:not(:nth-child(5n+1)),:host([data-mdcols="6"]) .carousel__controls>button:not(:nth-child(6n+1)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3))),:host([data-mdcols="4"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4))),:host([data-mdcols="5"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),:host([data-mdcols="6"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),:host([data-mdcols="2"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="3"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="4"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)) :host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="5"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(2)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(3)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(4)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(5)),:host([data-mdcols="6"]) .carousel__btns:has(~.carousel__controls button:first-child:nth-last-child(6)){display:none !important}:host([data-mdcols]) .carousel__controls{display:block !important}:host([data-mdcols]) .carousel__controls~.carousel__progress{display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10)),:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15)),:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20)),:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25)),:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30)){display:none !important}:host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10))~.carousel__progress,:host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15))~.carousel__progress,:host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20))~.carousel__progress,:host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25))~.carousel__progress,:host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30))~.carousel__progress{display:block !important}}:host(.hide-btns) .carousel__btns,:host(.hide-controls) .carousel__controls{display:none}:host(.thumbnails) .carousel__controls{display:flex !important;flex-wrap:wrap;max-width:100%;overflow:visible}:host(.thumbnails) .carousel__controls button{padding:0;margin:0 .2rem .4rem;width:6rem;height:auto;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);border-radius:0;position:relative;border-radius:0.25rem}:host(.thumbnails) .carousel__controls button img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;margin:0}:host(.thumbnails) .carousel__controls button[aria-current]{outline:2px solid var(--colour-info)}:host(.thumbnails) .carousel .carousel__btns{padding-bottom:.5rem}:host(.thumbnails) .carousel .btn-next,:host(.thumbnails) .carousel .btn-prev{position:relative;margin:0 !important}:host(.thumbnails) .carousel .carousel__progress{display:none !important}::slotted(div.image__wrapper){width:100%;aspect-ratio:var(--carousel-image-aspect-ratio, 3/2);position:relative}/*# sourceMappingURL=assets/css/components/carousel.component.css.map */
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
9
|
+
</style>
|
|
10
|
+
<div class="carousel" part="carousel">
|
|
11
|
+
<div class="carousel__wrapper">
|
|
12
|
+
<div class="carousel__inner">
|
|
13
|
+
<div class="carousel__content" part="content">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</div>
|
|
15
16
|
</div>
|
|
16
17
|
</div>
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
18
|
<div class="carousel__btns" part="btns">
|
|
20
|
-
<button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled
|
|
19
|
+
<button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
|
|
20
|
+
Prev
|
|
21
|
+
</button>
|
|
21
22
|
<button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
|
-
<div class="carousel__controls" part="controls">
|
|
25
|
-
|
|
26
|
-
</div>
|
|
25
|
+
<div class="carousel__controls" part="controls"></div>
|
|
27
26
|
|
|
28
27
|
<div class="carousel__progress" part="progress">
|
|
29
|
-
<input type="range" min="0" max="100" value="1" step="1"
|
|
28
|
+
<input type="range" min="0" max="100" value="1" step="1" />
|
|
30
29
|
</div>
|
|
31
|
-
|
|
32
|
-
</div>
|
|
30
|
+
</div>
|
|
33
31
|
`,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){const t=this;let n=[];const o=this.shadowRoot.querySelector(".carousel__controls");t.querySelector("[data-thumbnail]")&&(n=M(t),t.classList.add("thumbnails")),o.innerHTML=W(t,n),Array.from(t.querySelectorAll(":scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img")).forEach(a=>{a.style.inset="0 0.5rem 0 0.5rem",a.style.position="absolute",a.style.width="calc(100% - 1rem)",a.style.height="100%",a.style["object-fit"]="cover",a.closest("div").classList.add("image__wrapper")}),$(t),I(t,"iam-carousel",["pip-clicked","next-clicked","prev-clicked","slider-changed"])}}export{C as default};
|
|
34
32
|
//# sourceMappingURL=carousel.component.min.js.map
|