@iamproperty/components 7.6.4--beta2 → 7.6.4--beta4
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/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/address-lookup.component.css +1 -1
- package/assets/css/components/address-lookup.component.css.map +1 -1
- 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/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/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/doughnutchart.component.css +1 -1
- package/assets/css/components/doughnutchart.component.css.map +1 -1
- package/assets/css/components/fileupload.css +1 -1
- package/assets/css/components/fileupload.css.map +1 -1
- package/assets/css/components/header.css +1 -1
- package/assets/css/components/header.css.map +1 -1
- package/assets/css/components/modal.component.css +1 -1
- package/assets/css/components/modal.component.css.map +1 -1
- package/assets/css/components/multi-step-modal.component.css +1 -1
- package/assets/css/components/multi-step-modal.component.css.map +1 -1
- package/assets/css/components/multiselect.css +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/pagination.css +1 -1
- package/assets/css/components/pagination.css.map +1 -1
- package/assets/css/components/slider.css +1 -1
- package/assets/css/components/slider.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/tabs.component.css +1 -1
- package/assets/css/components/tabs.component.css.map +1 -1
- package/assets/css/components/tag.component.css +1 -1
- package/assets/css/components/tag.component.css.map +1 -1
- package/assets/css/components/tag.preload.css +1 -1
- package/assets/css/components/tag.preload.css.map +1 -1
- package/assets/css/components/tooltip.component.css +1 -1
- package/assets/css/components/tooltip.component.css.map +1 -1
- package/assets/css/components/video-modal.component.css +1 -1
- package/assets/css/components/video-modal.component.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.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.min.js +1 -1
- package/assets/js/components/actionbar/actionbar.component.min.js +2 -2
- package/assets/js/components/address-lookup/address-lookup.component.js +11 -5
- package/assets/js/components/address-lookup/address-lookup.component.min.js +4 -4
- 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/applied-filters/applied-filters.component.min.js +1 -1
- package/assets/js/components/barchart/barchart.component.min.js +4 -4
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/calendar/calendar.component.min.js +2 -2
- package/assets/js/components/card/card.component.min.js +2 -2
- package/assets/js/components/carousel/carousel.component.min.js +3 -3
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +2 -2
- package/assets/js/components/content/content.component.min.js +2 -2
- package/assets/js/components/darkmode/darkmode.component.min.js +1 -1
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +4 -4
- package/assets/js/components/fileupload/fileupload.component.min.js +2 -2
- package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/form/form.component.min.js +1 -1
- package/assets/js/components/header/header.component.min.js +2 -2
- package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
- package/assets/js/components/input/input.component.min.js +1 -1
- package/assets/js/components/input-range/input-range.component.min.js +1 -1
- package/assets/js/components/marketing/marketing.component.min.js +1 -1
- package/assets/js/components/menu/menu.component.min.js +1 -1
- package/assets/js/components/milestone/milestone.component.min.js +1 -1
- package/assets/js/components/milestone-group/milestone-group.component.min.js +1 -1
- package/assets/js/components/modal/modal.component.js +1 -1
- package/assets/js/components/modal/modal.component.min.js +3 -3
- package/assets/js/components/modal/modal.component.min.js.map +1 -1
- package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
- package/assets/js/components/multi-step-modal/multi-step-modal.component.min.js +4 -4
- package/assets/js/components/multiselect/multiselect.component.js +9 -76
- package/assets/js/components/multiselect/multiselect.component.min.js +4 -4
- package/assets/js/components/multiselect/multiselect.component.min.js.map +1 -1
- package/assets/js/components/nav/nav.component.min.js +2 -2
- package/assets/js/components/notification/notification.component.min.js +1 -1
- package/assets/js/components/pagination/pagination.component.min.js +2 -2
- package/assets/js/components/password/password.component.min.js +1 -1
- package/assets/js/components/popover/popover.component.min.js +1 -1
- package/assets/js/components/rank/rank.component.min.js +1 -1
- package/assets/js/components/rankings/rankings.component.min.js +1 -1
- package/assets/js/components/rating/rating.component.min.js +1 -1
- package/assets/js/components/record-card/record-card.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js +1 -1
- package/assets/js/components/slider/slider.component.min.js +2 -2
- package/assets/js/components/split-button/split-button.component.min.js +5 -5
- package/assets/js/components/std-address-lookup/std-address-lookup.component.js +39 -2
- package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js +10 -9
- package/assets/js/components/std-address-lookup/std-address-lookup.component.min.js.map +1 -1
- package/assets/js/components/table/table.component.min.js +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.min.js +1 -1
- package/assets/js/components/table-basic/table-basic.component.min.js +1 -1
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +1 -1
- package/assets/js/components/table-submit/table-submit.component.min.js +1 -1
- package/assets/js/components/tabs/tabs.component.min.js +2 -2
- package/assets/js/components/tag/tag.component.js +6 -1
- package/assets/js/components/tag/tag.component.min.js +4 -4
- package/assets/js/components/tag/tag.component.min.js.map +1 -1
- package/assets/js/components/tooltip/tooltip.component.min.js +2 -2
- package/assets/js/components/video-card/video-card.component.min.js +1 -1
- package/assets/js/components/video-modal/video-modal.component.min.js +3 -3
- package/assets/js/components/word-count/word-count.component.min.js +1 -1
- package/assets/js/modules/dropdown.js +97 -4
- package/assets/js/scripts.bundle.js +1 -1
- package/assets/js/scripts.bundle.min.js +1 -1
- package/assets/sass/_components.scss +0 -2
- package/assets/sass/_elements.scss +1 -0
- package/assets/sass/components/multiselect.preload.scss +0 -55
- package/assets/sass/components/multiselect.scss +172 -174
- package/assets/sass/components/tag.component.scss +38 -57
- package/assets/sass/components/tag.preload.scss +1 -26
- package/assets/sass/components/tooltip.component.scss +16 -15
- package/assets/sass/elements/button__group.css +43 -5
- package/assets/sass/elements/container.scss +7 -2
- package/assets/sass/elements/dropdown.scss +87 -0
- package/assets/sass/elements/forms.scss +6 -0
- package/assets/sass/foundations/colours.scss +10 -7
- package/assets/ts/components/address-lookup/address-lookup.component.ts +12 -5
- package/assets/ts/components/modal/modal.component.ts +1 -1
- package/assets/ts/components/multiselect/multiselect.component.ts +10 -78
- package/assets/ts/components/std-address-lookup/std-address-lookup.component.ts +51 -2
- package/assets/ts/components/tag/tag.component.ts +8 -11
- package/assets/ts/modules/dropdown.ts +117 -5
- package/dist/components.es.js +28 -28
- package/dist/components.umd.js +232 -225
- package/package.json +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class a 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
5
|
<style>
|
|
6
|
-
@layer elements{.container{display:block;margin-left:auto;margin-right:auto;
|
|
6
|
+
@layer elements{.container{display:block;margin-left:auto;margin-right:auto;container-type:inline-size;width:100%}.container:not([class*=col-]){grid-column:container !important;padding:var(--container-padding)}.container:not(:has(.row)):has([class*=col-]){display:grid;grid-template-columns:[content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end];column-gap:1rem}.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child){--col-start: auto}@media screen and (min-width: 36em){.container [class*=sm-col-span-]:not(:first-child){--col-start: auto}}@media screen and (min-width: 62em){.container [class*=md-col-span-]:not(:first-child){--col-start: auto}}.container:not(.container-fluid){max-width:var(--container-max-width)}.container .container:not(.container-xs-breakout){padding-left:0;padding-right:0;padding-bottom:0;padding-top:0}.container[class*=bg-]{padding-top:3rem;padding-bottom:2rem}.container[class*=bg-]+.container:not([class*=bg-]){padding-top:2rem}.container:before{display:table;clear:both;content:""}.container:after{display:table;clear:both;content:""}.container.container-xs-breakout{margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem)}@media screen and (min-width: 36em){.container.container-xs-breakout{margin-left:auto;margin-right:auto;width:100%}}:host .container{display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);width:100%}main>.row{padding-bottom:1rem}main>.row[class*=bg-]{padding-top:3rem;padding-bottom:2rem}main>.row[class*=bg-]+:is(.row,.container):not([class*=bg-]){padding-top:2rem}.container:has(.circle){position:relative;z-index:1}.container>.circle{position:absolute;z-index:var(--index-below);border-width:3px}.container:not([class*=circle-pattern-])>.circle{font-size:18.75rem;top:-4.6875rem;left:-12.5rem}.container:not([class*=circle-pattern-])>.circle~.circle{font-size:21.875rem;top:auto;left:auto;right:-6.25rem;bottom:-12.5rem}}*,*::before,*::after{box-sizing:border-box}.container{box-sizing:border-box}:host{padding-top:0 !important;margin-bottom:2rem;background-color:rgba(0,0,0,0) !important;display:block !important}.header-banner{padding-top:2.75rem;max-width:120rem;min-height:25rem;margin-inline:auto;display:block;position:relative;height:auto}@media screen and (min-width: 62em){.header-banner{padding-top:5.25rem}}.header-banner>picture{display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;overflow:hidden;min-height:25rem;max-height:25rem}.header-banner>picture:after{content:"";display:block;position:absolute;z-index:-1;inset:0;background:linear-gradient(300deg, rgb(30, 190, 230) 0%, rgb(0, 49, 60) 100%);opacity:.85}.header-banner>picture img{display:block;position:absolute;z-index:-2;inset:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%}:host(.header--contain) .header-banner{padding-bottom:2rem}:host(.header--contain) .header-banner>picture{max-height:100%}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
|
|
7
7
|
|
|
8
8
|
</style>
|
|
9
9
|
<div class="header-banner">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class v extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const n=document.createElement("template");n.innerHTML=`
|
|
5
5
|
<style class="styles">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const q=k=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:k})};q("iam-iamPrefix");class _ extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const s=document.createElement("template");s.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const o=s=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:s})};o("iam-iamPrefix");class i extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class e 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
5
|
<style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/class u 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=`
|
|
5
5
|
<style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const l=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},m=(t,n,a)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:n}),a.forEach(e=>{t.addEventListener(e,function(s){const d={event:e,element:n,target:s.target};Object.keys(s.detail).forEach(o=>{const i=s.detail[o];d[o]=i}),window.dataLayer.push(d)})}),!0),p=function(t){const n=t.dataset.status;if(!n)return;const a=t.shadowRoot.querySelector(".milestone-wrap"),e=document.createElement("span");e.setAttribute("part","status"),e.classList.add("milestone-status"),e.innerHTML=`${n} Step`,n==="Current"&&t.classList.add("current"),a.insertAdjacentElement("afterbegin",e)},u=function(t){const n=t.shadowRoot.querySelector(".task-wrap"),a=t.dataset.items?JSON.parse(t.dataset.items):[];a.length&&(a.forEach(e=>{const s=document.createElement("details"),d=document.createElement("summary"),o=document.createElement("div"),i=document.createElement("p");o.classList.add("task-details"),d.innerHTML=e.name,e.date_completed&&d.classList.add("complete"),s.appendChild(d),e.description&&(i.innerHTML=e.description,o.appendChild(i)),e.actions.length&&o.appendChild(h(e.actions,d)),s.appendChild(o),n.insertAdjacentElement("beforeend",s),s.addEventListener("click",()=>{s?.hasAttribute("open")?r("milestone-item-closed",e.name,t):r("milestone-item-opened",e.name,t)})}),t.appendChild(n))},r=function(t,n,a){const e=new CustomEvent(t,{detail:{title:n}});a.dispatchEvent(e)},h=function(t,n){const a=document.createElement("ul"),e=t.length,d=t.filter(o=>o.date_completed).length||0;if(!(e<1))return n.innerHTML+=` (${d}/${e})`,t.forEach(o=>{const i=document.createElement("li"),c=document.createElement("span");o.date_completed&&(i.classList.add("complete"),c.classList.add("action-date"),c.innerHTML=o.date_completed),i.innerHTML=o.action,i.appendChild(c),a.appendChild(i)}),a},w=function(t){p(t),u(t)};l("iam-milestone");class L extends HTMLElement{constructor(){var n;super(),this.attachShadow({mode:"open"});const a=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${a}/css/core.min.css`,s=document.createElement("template");s.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const r=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},l=(t,s,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:s}),e.forEach(n=>{t.addEventListener(n,function(o){const a={event:n,element:s,target:o.target};Object.keys(o.detail).forEach(i=>{const d=o.detail[i];a[i]=d}),window.dataLayer.push(a)})}),!0),u=function(t){if(!t.dataset.showAllToggle)return;const e=document.createElement("button");e.innerHTML="Show next steps",e.classList.add("btn","btn-tertiary","show-all-toggle"),t.appendChild(e),e.addEventListener("click",()=>{t.classList.contains("show-all")?(e.innerHTML="Show next steps",t.classList.remove("show-all"),c("hide-future-items",t)):(e.innerHTML="Hide next steps",t.classList.add("show-all"),c("show-future-items",t))})},c=function(t,s){const e=new CustomEvent(t,{});s.dispatchEvent(e)},h=function(t){u(t)};r("iam-milestone-group");class m extends HTMLElement{constructor(){var s;super();const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",n=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -36,7 +36,7 @@ class iamModal extends HTMLElement {
|
|
|
36
36
|
var _a, _b, _c, _d, _e, _f;
|
|
37
37
|
const originalDialog = this.querySelector('dialog');
|
|
38
38
|
const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.getAttribute('id');
|
|
39
|
-
|
|
39
|
+
let dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');
|
|
40
40
|
const closeButton = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-close]');
|
|
41
41
|
const cancelButton = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('[data-cancel]');
|
|
42
42
|
const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('[data-agreed]');
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const w=d=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:d})},y=(d,a)=>{var i;const e=(i=a.shadowRoot)===null||i===void 0?void 0:i.querySelector("dialog");e?.showModal(),e?.focus();const c=new CustomEvent("modal-opened",{bubbles:!0,cancelable:!0,detail:{modalId:d}});a.dispatchEvent(c),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:d})},r=(d,a)=>{var i;const e=(i=a.shadowRoot)===null||i===void 0?void 0:i.querySelector("dialog");e?.close();const c=new CustomEvent("modal-closed",{bubbles:!0,cancelable:!0,detail:{modalId:d}});a.dispatchEvent(c),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:d})},k='<button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>';w("iam-card");class x extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
|
|
5
5
|
<style>
|
|
6
6
|
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
7
7
|
|
|
8
|
-
@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--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>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{*,*::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-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:.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-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem}.btn-compact:not(:last-child){margin-right:.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;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - .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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading)}[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-white) !important;color:var(--colour-white)}[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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading) !important}.btn-compact:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial}.btn-compact:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}.btn-compact:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important}.btn-compact:not(.btn-action){border-radius:50% !important}.btn-compact:before{font-family:"Font Awesome 6 Pro" !important;content:var(--fa) !important;display:block}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:-0.5em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) 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}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:0.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0}.btn-secondary{order:2}.btn-primary{order:1}}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;column-gap:var(--gap);margin-bottom:1.5rem;.btn{max-width:fit-content;white-space:nowrap}.btn-secondary{order:1}.btn-primary{order:2}}.btn__group.text-end{justify-content:flex-end}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host{overscroll-behavior:contain;display:block;container-type:inline-size}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}@layer components{dialog[open]{width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain;overflow-y:hidden}@media screen and (min-width: 36em){dialog[open]{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog[open]{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog[open]::before{content:"";top:.75rem;bottom:auto;left:0;right:.5rem;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog[open]::after{content:"";top:auto;bottom:.75rem;left:0;right:6px;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog[open] .scroll{margin-inline:calc(var(--dialog-padding)*-1);margin-block:calc((var(--dialog-padding) - .75rem)*-1);padding-inline:var(--dialog-padding);padding-block:calc(var(--dialog-padding) - .75rem);height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;position:relative;z-index:1}dialog[open] .scroll .fa-circle{display:none}dialog[open]>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog[open]:has(.youtube-embed){padding:0 !important}dialog[open].dialog--fullwidth{max-width:69.5rem}dialog[open] .btn__group{display:none}@media screen and (min-width: 36em){:host(.modal--sm) dialog[open]{min-width:20.9375rem;width:20.9375rem;max-width:20.9375rem}}@media screen and (min-width: 62em){:host(.modal--sm) dialog[open]{min-width:28.375rem;width:28.375rem;max-width:28.375rem}}@media screen and (min-width: 36em){:host(.modal--lg) dialog[open]{min-width:42.875rem;width:42.875rem;max-width:42.875rem}}@media screen and (min-width: 62em){:host(.modal--lg) dialog[open]{min-width:46rem;width:46rem;max-width:46rem}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-top:4px solid rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c1c1c1;width:6px;border-radius:3px}::slotted(p:last-child){padding-bottom:0 !important}::slotted(p:last-child){padding-bottom:0 !important}::slotted(:last-child){margin-bottom:0 !important}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]{text-align:center}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{display:var(--fa-display, block);line-height:1;font-size:3rem;height:3rem;width:3rem;margin-top:0;margin-bottom:1.5rem;line-height:1;color:var(--colour-heading);margin-inline:auto}@media screen and (min-width: 62em){:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{font-size:4rem;height:4rem;width:4rem}}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle:has(>i){position:relative}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle>i:before{position:absolute;top:0;left:50%;transform:scale(0.5) translate(-100%, 0)}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]>button:first-child{display:none}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .btn__group{display:flex;justify-content:center;padding-top:2rem}:host([data-type=acknowledgement]) dialog[open] .btn__group [data-cancel]{display:none}}/*# sourceMappingURL=assets/css/components/modal.component.css.map */
|
|
8
|
+
@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--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>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{*,*::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-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:.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-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem}.btn-compact:not(:last-child){margin-right:.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;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - .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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading)}[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-white) !important;color:var(--colour-white)}[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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading) !important}.btn-compact:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial}.btn-compact:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}.btn-compact:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important}.btn-compact:not(.btn-action){border-radius:50% !important}.btn-compact:before{font-family:"Font Awesome 6 Pro" !important;content:var(--fa) !important;display:block}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:-0.5em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) 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}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:0.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0}.btn-tertiary{max-width:fit-content;margin-inline:auto;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1}.btn-compact{max-width:fit-content;margin-inline:auto}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}.btn-tertiary{max-width:fit-content;margin-inline:0;margin-block:auto;order:1;reading-order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:3}.btn-compact{margin-inline:0;margin-block:auto}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host{overscroll-behavior:contain;display:block;container-type:inline-size}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}@layer components{dialog[open]{width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain;overflow-y:hidden}@media screen and (min-width: 36em){dialog[open]{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog[open]{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog[open]::before{content:"";top:.75rem;bottom:auto;left:0;right:.5rem;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog[open]::after{content:"";top:auto;bottom:.75rem;left:0;right:6px;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog[open] .scroll{margin-inline:calc(var(--dialog-padding)*-1);margin-block:calc((var(--dialog-padding) - .75rem)*-1);padding-inline:var(--dialog-padding);padding-block:calc(var(--dialog-padding) - .75rem);height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;position:relative;z-index:1}dialog[open] .scroll .fa-circle{display:none}dialog[open]>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog[open]:has(.youtube-embed){padding:0 !important}dialog[open].dialog--fullwidth{max-width:69.5rem}dialog[open] .btn__group{display:none}@media screen and (min-width: 36em){:host(.modal--sm) dialog[open]{min-width:20.9375rem;width:20.9375rem;max-width:20.9375rem}}@media screen and (min-width: 62em){:host(.modal--sm) dialog[open]{min-width:28.375rem;width:28.375rem;max-width:28.375rem}}@media screen and (min-width: 36em){:host(.modal--lg) dialog[open]{min-width:42.875rem;width:42.875rem;max-width:42.875rem}}@media screen and (min-width: 62em){:host(.modal--lg) dialog[open]{min-width:46rem;width:46rem;max-width:46rem}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-top:4px solid rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c1c1c1;width:6px;border-radius:3px}::slotted(p:last-child){padding-bottom:0 !important}::slotted(p:last-child){padding-bottom:0 !important}::slotted(:last-child){margin-bottom:0 !important}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]{text-align:center}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{display:var(--fa-display, block);line-height:1;font-size:3rem;height:3rem;width:3rem;margin-top:0;margin-bottom:1.5rem;line-height:1;color:var(--colour-heading);margin-inline:auto}@media screen and (min-width: 62em){:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{font-size:4rem;height:4rem;width:4rem}}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle:has(>i){position:relative}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle>i:before{position:absolute;top:0;left:50%;transform:scale(0.5) translate(-100%, 0)}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]>button:first-child{display:none}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .btn__group{display:flex;justify-content:center;padding-top:2rem}:host([data-type=acknowledgement]) dialog[open] .btn__group [data-cancel]{display:none}}/*# sourceMappingURL=assets/css/components/modal.component.css.map */
|
|
9
9
|
|
|
10
10
|
</style>
|
|
11
11
|
<link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
23
|
</dialog>
|
|
24
|
-
`,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){var a,i,e,c,m,b;const o=this.querySelector("dialog"),n=this.hasAttribute("id")?this.getAttribute("id"):o?.getAttribute("id")
|
|
24
|
+
`,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){var a,i,e,c,m,b;const o=this.querySelector("dialog"),n=this.hasAttribute("id")?this.getAttribute("id"):o?.getAttribute("id");let l=(a=this.shadowRoot)===null||a===void 0?void 0:a.querySelector("dialog");const p=(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("[data-close]"),g=(e=this.shadowRoot)===null||e===void 0?void 0:e.querySelector("[data-cancel]"),h=this.querySelector('button[slot="agreed-button"]')?this.querySelector('button[slot="agreed-button"]'):(c=this.shadowRoot)===null||c===void 0?void 0:c.querySelector("[data-agreed]"),v=this.hasAttribute("data-type")?this.getAttribute("data-type"):"passive",u=()=>{const t=new CustomEvent("agreed",{detail:{modalId:n}});this.dispatchEvent(t),r(n,this)};document.addEventListener("click",t=>{(t.target.matches(`[command="show-modal"][commandfor="${n}"]`)||t.target.matches(`[data-modal="${n}"]`))&&y(n,this)}),document.addEventListener("click",t=>{t.target.matches(`[command="close"][commandfor="${n}"]`)&&r(n,this)}),o?.addEventListener("command",t=>{event.command=="show-modal"&&t.preventDefault()}),o?.addEventListener("command",t=>{t.preventDefault(),event.command=="close"&&r(n,this)}),o?.addEventListener("close",t=>{t.preventDefault(),r(n,this)}),o&&Array.from(o?.querySelectorAll("[slot]")).forEach(t=>{this.moveBefore(t,o)}),p?.addEventListener("click",()=>{r(n,this)}),g?.addEventListener("click",()=>{r(n,this)}),h?.addEventListener("click",()=>{u()}),this.addEventListener("close-modal",()=>{r(n,this)}),o?.addEventListener("submit",t=>{t.submitter&&t.submitter.hasAttribute("formmethod")&&t.submitter.getAttribute("formmethod")=="dialog"?r(n,this):u()}),Array.from(this.querySelectorAll('button[type="submit"]')).forEach(t=>{t.addEventListener("click",f=>{!t.closest("form")&&!t.hasAttribute("formmethod")&&u()})}),this.addEventListener("click",t=>{if(window.getComputedStyle(l).display==="contents"&&(l=l.parentNode.closest("dialog[open]")),v!="transactional"&&v!="acknowledgement"){const s=l.getBoundingClientRect();(t.clientX<s.left||t.clientX>s.right||t.clientY<s.top||t.clientY>s.bottom)&&(t.target.closest("dialog *")||r(n,this))}}),v=="transactional"&&((b=(m=this.shadowRoot)===null||m===void 0?void 0:m.querySelector(".scroll"))===null||b===void 0||b.insertAdjacentHTML("afterbegin",`<i class="fa-light fa-circle" aria-hidden="true">
|
|
25
25
|
<i class="fa-regular fa-${this.hasAttribute("data-icon")?this.getAttribute("data-icon"):"info"}" aria-hidden="true"></i>
|
|
26
26
|
</i>`))}}export{x as default};
|
|
27
27
|
//# sourceMappingURL=modal.component.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.component.min.js","sources":["../_global.js","../../modules/modal.js","modal.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 openModal = (id, modal) => {\n var _a;\n const dialog = (_a = modal.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n dialog === null || dialog === void 0 ? void 0 : dialog.showModal();\n dialog === null || dialog === void 0 ? void 0 : dialog.focus();\n const closeEvent = new CustomEvent('modal-opened', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openModal',\n id: id,\n });\n};\nexport const closeModal = (id, modal) => {\n var _a;\n const dialog = (_a = modal.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n dialog === null || dialog === void 0 ? void 0 : dialog.close();\n const closeEvent = new CustomEvent('modal-closed', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'closeModal',\n id: id,\n });\n};\nexport const closeButtonHtml = `<button class=\"btn btn-compact btn-secondary fa-xmark-large\" data-close>Close</button>`;\n","import { trackComponentRegistered } from '../_global.js';\nimport { openModal, closeModal, closeButtonHtml } from '../../modules/modal.js';\ntrackComponentRegistered('iam-card');\nclass iamModal 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/modal.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 <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <dialog>\n ${closeButtonHtml}\n <div class=\"scroll\">\n <slot></slot>\n <div class=\"btn__group\">\n <button class=\"btn btn-secondary\" data-cancel>${this.hasAttribute('data-cancel-text') ? this.getAttribute('data-cancel-text') : 'Cancel'}</button>\n <slot name=\"agreed-button\">\n <button class=\"btn btn-primary\" data-agreed>${this.hasAttribute('data-agreed-text') ? this.getAttribute('data-agreed-text') : 'Submit'}</button>\n </slot>\n </div>\n </div>\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n var _a, _b, _c, _d, _e, _f;\n const originalDialog = this.querySelector('dialog');\n const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.getAttribute('id');\n const dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n const closeButton = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-close]');\n const cancelButton = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('[data-cancel]');\n const agreedButton = this.querySelector('button[slot=\"agreed-button\"]') ? this.querySelector('button[slot=\"agreed-button\"]') : (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('[data-agreed]');\n const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';\n const agreed = () => {\n const agreedEvent = new CustomEvent('agreed', {\n detail: { modalId: id },\n });\n this.dispatchEvent(agreedEvent);\n closeModal(id, this);\n };\n document.addEventListener('click', (e) => {\n if (e.target.matches(`[command=\"show-modal\"][commandfor=\"${id}\"]`) || e.target.matches(`[data-modal=\"${id}\"]`)) {\n openModal(id, this);\n }\n });\n document.addEventListener('click', (e) => {\n if (e.target.matches(`[command=\"close\"][commandfor=\"${id}\"]`)) {\n closeModal(id, this);\n }\n });\n // Disable the original event \n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('command', (e) => {\n if (event.command == \"show-modal\") {\n e.preventDefault();\n }\n });\n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('command', (e) => {\n e.preventDefault();\n if (event.command == \"close\") {\n closeModal(id, this);\n }\n });\n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('close', (e) => {\n e.preventDefault();\n closeModal(id, this);\n });\n // Move the submit button so that the slot functionality works\n if (originalDialog) {\n Array.from(originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.querySelectorAll('[slot]')).forEach((element) => {\n this.moveBefore(element, originalDialog);\n });\n }\n closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {\n closeModal(id, this);\n });\n cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener('click', () => {\n closeModal(id, this);\n });\n agreedButton === null || agreedButton === void 0 ? void 0 : agreedButton.addEventListener('click', () => {\n agreed();\n });\n this.addEventListener('close-modal', () => {\n closeModal(id, this);\n });\n // Hijack the default form submission \n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('submit', (e) => {\n if (e.submitter && e.submitter.hasAttribute('formmethod') && e.submitter.getAttribute('formmethod') == \"dialog\") {\n closeModal(id, this);\n }\n else {\n agreed();\n }\n });\n Array.from(this.querySelectorAll('button[type=\"submit\"]')).forEach((button) => {\n button.addEventListener('click', (e) => {\n if (!button.closest('form') && !button.hasAttribute('formmethod')) {\n agreed();\n }\n });\n });\n // Add click event on backdrop\n this.addEventListener('click', (event) => {\n // Small fix to make sure the dialog isn't a dialog inside of a dialog.\n const style = window.getComputedStyle(dialog);\n if (style.display === 'contents')\n dialog = dialog.parentNode.closest('dialog[open]');\n // Dont allow the backdrop to be clicked when transactional\n if (modalType != 'transactional' && modalType != 'acknowledgement') {\n const dialogDimensions = dialog.getBoundingClientRect();\n if (event.clientX < dialogDimensions.left ||\n event.clientX > dialogDimensions.right ||\n event.clientY < dialogDimensions.top ||\n event.clientY > dialogDimensions.bottom) {\n if (!event.target.closest('dialog *'))\n closeModal(id, this); // Weird bug when interacting with radio input fields within dialogs cuases it to close\n }\n }\n });\n if (modalType == 'transactional') {\n (_f = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.scroll')) === null || _f === void 0 ? void 0 : _f.insertAdjacentHTML('afterbegin', `<i class=\"fa-light fa-circle\" aria-hidden=\"true\">\n <i class=\"fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}\" aria-hidden=\"true\"></i>\n </i>`);\n }\n }\n}\nexport default iamModal;\n"],"names":["trackComponentRegistered","componentName","openModal","id","modal","_a","dialog","closeEvent","closeModal","closeButtonHtml","iamModal","template","_b","_c","_d","_e","_f","originalDialog","closeButton","cancelButton","agreedButton","modalType","agreed","agreedEvent","e","element","button","event","dialogDimensions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.component.min.js","sources":["../_global.js","../../modules/modal.js","modal.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 openModal = (id, modal) => {\n var _a;\n const dialog = (_a = modal.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n dialog === null || dialog === void 0 ? void 0 : dialog.showModal();\n dialog === null || dialog === void 0 ? void 0 : dialog.focus();\n const closeEvent = new CustomEvent('modal-opened', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'openModal',\n id: id,\n });\n};\nexport const closeModal = (id, modal) => {\n var _a;\n const dialog = (_a = modal.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n dialog === null || dialog === void 0 ? void 0 : dialog.close();\n const closeEvent = new CustomEvent('modal-closed', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'closeModal',\n id: id,\n });\n};\nexport const closeButtonHtml = `<button class=\"btn btn-compact btn-secondary fa-xmark-large\" data-close>Close</button>`;\n","import { trackComponentRegistered } from '../_global.js';\nimport { openModal, closeModal, closeButtonHtml } from '../../modules/modal.js';\ntrackComponentRegistered('iam-card');\nclass iamModal 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/modal.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 <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <dialog>\n ${closeButtonHtml}\n <div class=\"scroll\">\n <slot></slot>\n <div class=\"btn__group\">\n <button class=\"btn btn-secondary\" data-cancel>${this.hasAttribute('data-cancel-text') ? this.getAttribute('data-cancel-text') : 'Cancel'}</button>\n <slot name=\"agreed-button\">\n <button class=\"btn btn-primary\" data-agreed>${this.hasAttribute('data-agreed-text') ? this.getAttribute('data-agreed-text') : 'Submit'}</button>\n </slot>\n </div>\n </div>\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n var _a, _b, _c, _d, _e, _f;\n const originalDialog = this.querySelector('dialog');\n const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.getAttribute('id');\n let dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');\n const closeButton = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-close]');\n const cancelButton = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('[data-cancel]');\n const agreedButton = this.querySelector('button[slot=\"agreed-button\"]') ? this.querySelector('button[slot=\"agreed-button\"]') : (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('[data-agreed]');\n const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';\n const agreed = () => {\n const agreedEvent = new CustomEvent('agreed', {\n detail: { modalId: id },\n });\n this.dispatchEvent(agreedEvent);\n closeModal(id, this);\n };\n document.addEventListener('click', (e) => {\n if (e.target.matches(`[command=\"show-modal\"][commandfor=\"${id}\"]`) || e.target.matches(`[data-modal=\"${id}\"]`)) {\n openModal(id, this);\n }\n });\n document.addEventListener('click', (e) => {\n if (e.target.matches(`[command=\"close\"][commandfor=\"${id}\"]`)) {\n closeModal(id, this);\n }\n });\n // Disable the original event \n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('command', (e) => {\n if (event.command == \"show-modal\") {\n e.preventDefault();\n }\n });\n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('command', (e) => {\n e.preventDefault();\n if (event.command == \"close\") {\n closeModal(id, this);\n }\n });\n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('close', (e) => {\n e.preventDefault();\n closeModal(id, this);\n });\n // Move the submit button so that the slot functionality works\n if (originalDialog) {\n Array.from(originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.querySelectorAll('[slot]')).forEach((element) => {\n this.moveBefore(element, originalDialog);\n });\n }\n closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {\n closeModal(id, this);\n });\n cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener('click', () => {\n closeModal(id, this);\n });\n agreedButton === null || agreedButton === void 0 ? void 0 : agreedButton.addEventListener('click', () => {\n agreed();\n });\n this.addEventListener('close-modal', () => {\n closeModal(id, this);\n });\n // Hijack the default form submission \n originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('submit', (e) => {\n if (e.submitter && e.submitter.hasAttribute('formmethod') && e.submitter.getAttribute('formmethod') == \"dialog\") {\n closeModal(id, this);\n }\n else {\n agreed();\n }\n });\n Array.from(this.querySelectorAll('button[type=\"submit\"]')).forEach((button) => {\n button.addEventListener('click', (e) => {\n if (!button.closest('form') && !button.hasAttribute('formmethod')) {\n agreed();\n }\n });\n });\n // Add click event on backdrop\n this.addEventListener('click', (event) => {\n // Small fix to make sure the dialog isn't a dialog inside of a dialog.\n const style = window.getComputedStyle(dialog);\n if (style.display === 'contents')\n dialog = dialog.parentNode.closest('dialog[open]');\n // Dont allow the backdrop to be clicked when transactional\n if (modalType != 'transactional' && modalType != 'acknowledgement') {\n const dialogDimensions = dialog.getBoundingClientRect();\n if (event.clientX < dialogDimensions.left ||\n event.clientX > dialogDimensions.right ||\n event.clientY < dialogDimensions.top ||\n event.clientY > dialogDimensions.bottom) {\n if (!event.target.closest('dialog *'))\n closeModal(id, this); // Weird bug when interacting with radio input fields within dialogs cuases it to close\n }\n }\n });\n if (modalType == 'transactional') {\n (_f = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.scroll')) === null || _f === void 0 ? void 0 : _f.insertAdjacentHTML('afterbegin', `<i class=\"fa-light fa-circle\" aria-hidden=\"true\">\n <i class=\"fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}\" aria-hidden=\"true\"></i>\n </i>`);\n }\n }\n}\nexport default iamModal;\n"],"names":["trackComponentRegistered","componentName","openModal","id","modal","_a","dialog","closeEvent","closeModal","closeButtonHtml","iamModal","template","_b","_c","_d","_e","_f","originalDialog","closeButton","cancelButton","agreedButton","modalType","agreed","agreedEvent","e","element","button","event","dialogDimensions"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
4
|
*/const g=c=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:c})},y=(c,e,u)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:e}),u.forEach(l=>{c.addEventListener(l,function(i){const n={event:l,element:e,target:i.target};Object.keys(i.detail).forEach(d=>{const t=i.detail[d];n[d]=t}),window.dataLayer.push(n)})}),!0);g("iam-multi-step");class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.6.4--
|
|
2
|
+
* iamKey v7.6.4--beta4
|
|
3
3
|
* Copyright 2022-2026 iamproperty
|
|
4
|
-
*/const A=p=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:p})},E=(p,i,
|
|
4
|
+
*/const A=p=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:p})},E=(p,i,s)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:i}),s.forEach(d=>{p.addEventListener(d,function(e){const r={event:d,element:i,target:e.target};Object.keys(e.detail).forEach(a=>{const m=e.detail[a];r[a]=m}),window.dataLayer.push(r)})}),!0);A("iam-multi-step-modal");class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const i=document.createElement("template");i.innerHTML=`
|
|
5
5
|
<style>
|
|
6
|
-
@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--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>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{*,*::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-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:.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-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem}.btn-compact:not(:last-child){margin-right:.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;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - .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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading)}[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-white) !important;color:var(--colour-white)}[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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading) !important}.btn-compact:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial}.btn-compact:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}.btn-compact:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important}.btn-compact:not(.btn-action){border-radius:50% !important}.btn-compact:before{font-family:"Font Awesome 6 Pro" !important;content:var(--fa) !important;display:block}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:-0.5em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) 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}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:0.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0}.btn-secondary{order:2}.btn-primary{order:1}}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;column-gap:var(--gap);margin-bottom:1.5rem;.btn{max-width:fit-content;white-space:nowrap}.btn-secondary{order:1}.btn-primary{order:2}}.btn__group.text-end{justify-content:flex-end}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}*,*:before,*:after{box-sizing:border-box}dialog[open]{--dialog-padding: 1.5rem;box-sizing:border-box;padding-top:calc(var(--dialog-padding)*4);padding-left:var(--dialog-padding)}@media screen and (min-width: 62em){dialog[open]{padding-top:var(--dialog-padding);padding-left:calc(var(--dialog-padding) + 17.625rem) !important;flex-direction:column}}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}dialog[open]{padding:6rem 1.5rem 0 1.5rem}@media screen and (min-width: 36em){dialog[open]{min-width:28.25rem;width:28.25rem;max-width:28.25rem}}@media screen and (min-width: 62em){dialog[open]{min-width:57.75rem;width:57.75rem;max-width:57.75rem;padding:0}}@media screen and (min-width: 62em)and (min-height: 31.25rem){dialog[open]{height:29.875rem;max-height:29.875rem}}dialog[open]>button:first-child{position:absolute;top:5rem;right:6px;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:Canvas}@media screen and (min-width: 62em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}@media screen and (max-width: 36em){dialog[open]{min-width:100%;min-height:100%;border-radius:0;overflow-y:auto}dialog[open] iam-multi-step{padding-inline:0 !important}dialog[open] form{height:calc(100vh - 6rem);padding-inline:var(--dialog-padding) !important}dialog[open] .btn--wrapper{padding-top:4rem}dialog[open] .mh-lg{max-height:none !important;overflow:visible}dialog[open]:before,dialog[open] *:first-child{margin-top:auto !important}dialog[open] *:last-child{margin-bottom:auto !important}}.steps{width:100%;position:absolute;top:0;left:0;padding:var(--dialog-padding);counter-reset:section;display:flex;justify-content:space-between;background-color:var(--colour-primary)}.steps:before{content:"";position:absolute;top:calc(50% - 1px);left:var(--dialog-padding);z-index:2;width:calc(100% - var(--dialog-padding) - var(--dialog-padding));height:2px;background:currentColor;z-index:1;background:linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255, 255, 255, 0.5) var(--progress, 0%), rgba(255, 255, 255, 0.5) 100%)}.steps button{position:relative;background:rgba(0,0,0,0);border:none;color:hsla(0,0%,100%,.5);height:1.5rem;line-height:1.5rem;width:1.5rem;text-indent:300%;overflow:hidden;z-index:2;background-color:var(--colour-primary);outline:.5rem solid var(--colour-primary);cursor:pointer}.steps button:before{position:absolute;top:0;left:0;counter-increment:section;content:counter(section);border:1px solid currentColor;height:1.5rem;line-height:1.5rem;width:1.5rem;text-align:center;display:inline-block;text-indent:0;border-radius:50%}.steps button:not(.active):not(.valid){pointer-events:none}.steps button:not(.active):not(.valid):before{opacity:.5}.steps button.active{color:var(--colour-white)}.steps button.valid{color:var(--colour-success)}@container style(--theme: dark){.steps button{color:rgba(0,0,0,.5)}.steps button.active{color:#000}.steps button.valid{color:var(--colour-complete)}}@media screen and (min-width: 62em){.steps{width:17.625rem;height:100%;flex-direction:column;justify-content:center}.steps:before{display:none}.steps button{margin-block:.5rem;width:100%;text-indent:0;text-align:left;padding-left:2rem;font-size:1.125rem;outline-width:1px}}/*# sourceMappingURL=assets/css/components/multi-step-modal.component.css.map */
|
|
6
|
+
@layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--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>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{*,*::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-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:.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-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem}.btn-compact:not(:last-child){margin-right:.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;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - .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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading)}[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-white) !important;color:var(--colour-white)}[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-white) !important;border-color:var(--colour-white) !important;color:var(--colour-heading) !important}.btn-compact:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial}.btn-compact:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}.btn-compact:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important}.btn-compact:not(.btn-action){border-radius:50% !important}.btn-compact:before{font-family:"Font Awesome 6 Pro" !important;content:var(--fa) !important;display:block}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2}.btn[popovertarget]>.fa-chevron-down{display:none}.btn[popovertarget]:not(:has(i)):after{content:"";display:inline-block;margin-right:-0.5em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}.btn[popovertarget][aria-pressed]:after{transform:rotate(270deg)}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content}.btn:has(select) select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}.btn:has(select) select option{font-size:1rem;text-align:left;color:var(--colour-primary);padding-inline:var(--menu-item-padding, 0.5rem);padding-block:var(--menu-item-padding, 0.5rem) !important;border-radius:.25rem !important}.btn:has(select) select option:not(:last-child){margin:var(--menu-item-margin, 0 0 0.25rem 0) !important}.btn:has(select) select option:hover{background:var(--colour-light) !important}.btn:has(select) select option:after{content:attr(data-email)}.btn:has(select) select::picker-icon{display:none}.btn:has(select) select::picker(select){appearance:base-select;background:var(--menu-bg, canvas);margin-block:var(--menu-margin, 0.25rem);padding:var(--menu-padding, 0.5rem) !important;border:none !important;border-radius:.5rem;box-shadow:0px 2px 9px rgba(0,0,0,.1);font-size:1rem}.btn:has(select) 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}.btn:has(select) select option::checkmark{display:none}.btn:has(select) select selectedcontent span{display:none}.btn:has(select):after{position:absolute;top:0.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em}.btn-action:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}.btn-action:has(select):after{top:.2rem;right:.5rem}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0}.btn-tertiary{max-width:fit-content;margin-inline:auto;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1}.btn-compact{max-width:fit-content;margin-inline:auto}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}.btn-tertiary{max-width:fit-content;margin-inline:0;margin-block:auto;order:1;reading-order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:3}.btn-compact{margin-inline:0;margin-block:auto}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}*,*:before,*:after{box-sizing:border-box}dialog[open]{--dialog-padding: 1.5rem;box-sizing:border-box;padding-top:calc(var(--dialog-padding)*4);padding-left:var(--dialog-padding)}@media screen and (min-width: 62em){dialog[open]{padding-top:var(--dialog-padding);padding-left:calc(var(--dialog-padding) + 17.625rem) !important;flex-direction:column}}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}dialog[open]{padding:6rem 1.5rem 0 1.5rem}@media screen and (min-width: 36em){dialog[open]{min-width:28.25rem;width:28.25rem;max-width:28.25rem}}@media screen and (min-width: 62em){dialog[open]{min-width:57.75rem;width:57.75rem;max-width:57.75rem;padding:0}}@media screen and (min-width: 62em)and (min-height: 31.25rem){dialog[open]{height:29.875rem;max-height:29.875rem}}dialog[open]>button:first-child{position:absolute;top:5rem;right:6px;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:Canvas}@media screen and (min-width: 62em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}@media screen and (max-width: 36em){dialog[open]{min-width:100%;min-height:100%;border-radius:0;overflow-y:auto}dialog[open] iam-multi-step{padding-inline:0 !important}dialog[open] form{height:calc(100vh - 6rem);padding-inline:var(--dialog-padding) !important}dialog[open] .btn--wrapper{padding-top:4rem}dialog[open] .mh-lg{max-height:none !important;overflow:visible}dialog[open]:before,dialog[open] *:first-child{margin-top:auto !important}dialog[open] *:last-child{margin-bottom:auto !important}}.steps{width:100%;position:absolute;top:0;left:0;padding:var(--dialog-padding);counter-reset:section;display:flex;justify-content:space-between;background-color:var(--colour-primary)}.steps:before{content:"";position:absolute;top:calc(50% - 1px);left:var(--dialog-padding);z-index:2;width:calc(100% - var(--dialog-padding) - var(--dialog-padding));height:2px;background:currentColor;z-index:1;background:linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255, 255, 255, 0.5) var(--progress, 0%), rgba(255, 255, 255, 0.5) 100%)}.steps button{position:relative;background:rgba(0,0,0,0);border:none;color:hsla(0,0%,100%,.5);height:1.5rem;line-height:1.5rem;width:1.5rem;text-indent:300%;overflow:hidden;z-index:2;background-color:var(--colour-primary);outline:.5rem solid var(--colour-primary);cursor:pointer}.steps button:before{position:absolute;top:0;left:0;counter-increment:section;content:counter(section);border:1px solid currentColor;height:1.5rem;line-height:1.5rem;width:1.5rem;text-align:center;display:inline-block;text-indent:0;border-radius:50%}.steps button:not(.active):not(.valid){pointer-events:none}.steps button:not(.active):not(.valid):before{opacity:.5}.steps button.active{color:var(--colour-white)}.steps button.valid{color:var(--colour-success)}@container style(--theme: dark){.steps button{color:rgba(0,0,0,.5)}.steps button.active{color:#000}.steps button.valid{color:var(--colour-complete)}}@media screen and (min-width: 62em){.steps{width:17.625rem;height:100%;flex-direction:column;justify-content:center}.steps:before{display:none}.steps button{margin-block:.5rem;width:100%;text-indent:0;text-align:left;padding-left:2rem;font-size:1.125rem;outline-width:1px}}/*# sourceMappingURL=assets/css/components/multi-step-modal.component.css.map */
|
|
7
7
|
|
|
8
8
|
</style>
|
|
9
9
|
<link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</dialog>
|
|
16
|
-
`,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){var i,
|
|
16
|
+
`,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){var i,s;const d=this.querySelector("dialog"),e=this,r=this.hasAttribute("id")?this.getAttribute("id"):d?.getAttribute("id"),a=(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("dialog"),m=(s=this.shadowRoot)===null||s===void 0?void 0:s.querySelector("[data-close]"),g=document.querySelector(`[data-modal="${r}"]`),w=this.shadowRoot.querySelector(".steps"),u=this.querySelector("form"),y=()=>{a?.showModal(),a?.focus();const t=new CustomEvent("modal-opened",{bubbles:!0,cancelable:!0,detail:{modalId:r}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:r})};d?.addEventListener("command",t=>{event.command=="show-modal"&&t.preventDefault()}),document.addEventListener("click",t=>{(t.target.matches(`[command="show-modal"][commandfor="${r}"]`)||t.target.matches(`[data-modal="${r}"]`))&&y()}),g?.addEventListener("click",()=>{a?.showModal(),a?.focus();const t=new CustomEvent("modal-opened",{bubbles:!0,cancelable:!0,detail:{modalId:r}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:r})});const k=()=>{a?.close();const t=new CustomEvent("modal-closed",{bubbles:!0,cancelable:!0,detail:{modalId:r}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:r})};m?.addEventListener("click",()=>{k()});const b=Array.from(e.querySelectorAll("fieldset[data-title]"));b.forEach((t,o)=>{w.insertAdjacentHTML("beforeend",`<button data-title="${t.getAttribute("data-title")}" type="button" class="${o==0?"active":""}" tabindex="-1">${t.getAttribute("data-title")}</button>`),o===0&&t.classList.add("active");const n=document.createElement("div");if(n.classList.add("btn--wrapper"),t.appendChild(n),o!=0&&(n.innerHTML+=`<button data-title="${b[o-1].getAttribute("data-title")}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`),o!=b.length-1&&(n.innerHTML+=`<button data-title="${b[o+1].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="button">Next</button>`),o==b.length-1)if(u&&u.querySelector(':scope > button[type="submit"]')){const c=u.querySelector(':scope > button[type="submit"]');c.classList.add("mb-0"),n.insertAdjacentElement("beforeend",c)}else n.innerHTML+=`<button data-title="${b[o].getAttribute("data-title")}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`});const v=Array.from(e.querySelectorAll("fieldset.was-validated"));for(let t=0;t<v.length;t++){const o=v[t],n=o.getAttribute("data-title");if(o.querySelector(".is-invalid")){Array.from(e.querySelectorAll(`[data-title="${n}"]`)).forEach(c=>{c.classList.add("active")});break}else Array.from(e.querySelectorAll(`[data-title="${n}"]`)).forEach(c=>{c.classList.add("valid")})}e.addEventListener("invalid",(function(){return function(t){t.preventDefault()}})(),!0);function f(t){const o=e.querySelector("fieldset.active")?e.querySelector("fieldset.active"):e.querySelector("fieldset[data-title]"),n=o.getAttribute("data-title");let c=!0;if(o.classList.add("was-validated"),Array.from(o.querySelectorAll("input")).forEach(l=>{l.checkValidity()||(c=!1)}),c?(Array.from(e.querySelectorAll(`[data-title="${n}"]`)).forEach(l=>{l.classList.add("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${n}"]`)).forEach(l=>{l.classList.add("valid")})):(Array.from(e.querySelectorAll(`[data-title="${n}"]`)).forEach(l=>{l.classList.remove("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${n}"]`)).forEach(l=>{l.classList.remove("valid")})),c||!t.hasAttribute("data-next")){const l=e.querySelector(`fieldset[data-title="${t.getAttribute("data-title")}"]`),z=e.shadowRoot.querySelector(`.steps button[data-title="${t.getAttribute("data-title")}"]`);Array.from(e.querySelectorAll("button")).forEach(h=>{h.classList.remove("active")}),Array.from(e.querySelectorAll("fieldset")).forEach(h=>{h.classList.remove("active")}),z.classList.add("active"),l.classList.add("active")}const x=Array.from(e.querySelectorAll("fieldset")).length,L=Array.from(e.querySelectorAll("fieldset.valid")).length;e.style.setProperty("--progress",`${L/(x-1)*100}%`)}e.addEventListener("keydown",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button")){const o=t.target.closest("button");t.keyCode==13&&o.getAttribute("type")!="submit"&&(t.preventDefault(),f(o))}t&&t.target instanceof HTMLElement&&t.target.closest("input")&&(t.target.closest("input").classList.remove("is-invalid"),t.keyCode==13&&t.preventDefault())}),e.addEventListener("click",t=>(t&&t.target instanceof HTMLElement&&t.target.closest('button[type="submit"]')&&t.target.closest("form").classList.add("was-validated"),null)),e.shadowRoot.addEventListener("click",t=>{if(t&&t.target instanceof HTMLElement&&t.target.closest("button[data-title]")){const o=t.target.closest("button[data-title]");f(o)}return null}),E(e,"iam-multi-step",[])}static get observedAttributes(){return["data-image"]}attributeChangedCallback(i,s,d){switch(i){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=d);break}}}}export{S as default};
|
|
17
17
|
//# sourceMappingURL=multi-step-modal.component.min.js.map
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import Cookies from 'js-cookie';
|
|
11
|
-
import { filterList } from '../../modules/dropdown.js';
|
|
1
|
+
import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown.js';
|
|
12
2
|
// Data layer Web component created
|
|
13
3
|
window.dataLayer = window.dataLayer || [];
|
|
14
4
|
window.dataLayer.push({
|
|
@@ -58,6 +48,12 @@ class iamMultiselect extends HTMLElement {
|
|
|
58
48
|
const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');
|
|
59
49
|
const ajaxURL = this.getAttribute('data-url');
|
|
60
50
|
innerLabel.innerHTML = multiselect.getAttribute('data-label');
|
|
51
|
+
// Make sure the dropdown options are set
|
|
52
|
+
Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
|
|
53
|
+
var _a;
|
|
54
|
+
label.classList.add('dropdown__option');
|
|
55
|
+
(_a = label === null || label === void 0 ? void 0 : label.querySelector('i')) === null || _a === void 0 ? void 0 : _a.remove();
|
|
56
|
+
});
|
|
61
57
|
if (multiselect.hasAttribute('placeholder')) {
|
|
62
58
|
search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
|
|
63
59
|
}
|
|
@@ -123,7 +119,7 @@ class iamMultiselect extends HTMLElement {
|
|
|
123
119
|
search.addEventListener('input', () => {
|
|
124
120
|
if (multiselect.hasAttribute('data-url')) {
|
|
125
121
|
if (search.value.length == 3) {
|
|
126
|
-
searchAjax(search
|
|
122
|
+
searchAjax(multiselect, search, filterList);
|
|
127
123
|
}
|
|
128
124
|
}
|
|
129
125
|
else {
|
|
@@ -196,6 +192,7 @@ class iamMultiselect extends HTMLElement {
|
|
|
196
192
|
search.focus();
|
|
197
193
|
});
|
|
198
194
|
// Add some keyboard features to keep it accessible
|
|
195
|
+
addKeyboardEvents(this, search);
|
|
199
196
|
multiselect.addEventListener('keydown', function (event) {
|
|
200
197
|
const activeElement = document.activeElement;
|
|
201
198
|
switch (event.key // change to event.key to key to use the above variable
|
|
@@ -232,32 +229,6 @@ class iamMultiselect extends HTMLElement {
|
|
|
232
229
|
search.focus();
|
|
233
230
|
}
|
|
234
231
|
break;
|
|
235
|
-
case 'ArrowUp':
|
|
236
|
-
// Up pressed
|
|
237
|
-
event.preventDefault();
|
|
238
|
-
if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
|
|
239
|
-
const arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
|
|
240
|
-
const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
|
|
241
|
-
const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
|
|
242
|
-
if (prevCheckbox)
|
|
243
|
-
prevCheckbox.focus();
|
|
244
|
-
else
|
|
245
|
-
search.focus();
|
|
246
|
-
}
|
|
247
|
-
break;
|
|
248
|
-
case 'ArrowDown':
|
|
249
|
-
// Down pressed
|
|
250
|
-
event.preventDefault();
|
|
251
|
-
if (activeElement == multiselect) {
|
|
252
|
-
multiselect.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();
|
|
253
|
-
}
|
|
254
|
-
else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
|
|
255
|
-
const activeValue = activeElement.value;
|
|
256
|
-
const nextCheckbox = multiselect.querySelector(`label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`);
|
|
257
|
-
if (nextCheckbox)
|
|
258
|
-
nextCheckbox.focus();
|
|
259
|
-
}
|
|
260
|
-
break;
|
|
261
232
|
case 'Enter':
|
|
262
233
|
event.stopPropagation();
|
|
263
234
|
event.preventDefault();
|
|
@@ -317,44 +288,6 @@ class iamMultiselect extends HTMLElement {
|
|
|
317
288
|
multiselect.addEventListener('mouseup', () => {
|
|
318
289
|
wrapper.removeAttribute('data-mousedown');
|
|
319
290
|
});
|
|
320
|
-
const searchAjax = (searchterm) => __awaiter(this, void 0, void 0, function* () {
|
|
321
|
-
const searchAjaxURL = `${ajaxURL}${encodeURI(searchterm)}`;
|
|
322
|
-
// Setup controller vars if not already set
|
|
323
|
-
if (!window.controller)
|
|
324
|
-
window.controller = [];
|
|
325
|
-
// Abort if controller already present for this url
|
|
326
|
-
if (window.controller[searchAjaxURL])
|
|
327
|
-
window.controller[searchAjaxURL].abort();
|
|
328
|
-
// Create a new controller so it can be aborted if new fetch made
|
|
329
|
-
window.controller[searchAjaxURL] = new AbortController();
|
|
330
|
-
const { signal } = controller[searchAjaxURL];
|
|
331
|
-
try {
|
|
332
|
-
yield fetch(searchAjaxURL, {
|
|
333
|
-
signal: signal,
|
|
334
|
-
method: 'get',
|
|
335
|
-
credentials: 'same-origin',
|
|
336
|
-
headers: new Headers({
|
|
337
|
-
'Content-Type': 'application/json',
|
|
338
|
-
Accept: 'application/json',
|
|
339
|
-
'X-Requested-With': 'XMLHttpRequest',
|
|
340
|
-
'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
|
|
341
|
-
}),
|
|
342
|
-
})
|
|
343
|
-
.then((response) => response.json())
|
|
344
|
-
.then((response) => {
|
|
345
|
-
let items = '';
|
|
346
|
-
for (let i = 0; i < response['data'].length; i++) {
|
|
347
|
-
items += `<label class="tag"><input type="checkbox" name="${multiselect.hasAttribute('data-name') ? multiselect.getAttribute('data-name') : 'tags'}" value="${response['data'][i].value}"/>${response['data'][i].title}</label>`;
|
|
348
|
-
}
|
|
349
|
-
multiselect.insertAdjacentHTML('beforeend', `${items}`);
|
|
350
|
-
filterList(multiselect, search);
|
|
351
|
-
return response;
|
|
352
|
-
});
|
|
353
|
-
}
|
|
354
|
-
catch (error) {
|
|
355
|
-
console.log(error);
|
|
356
|
-
}
|
|
357
|
-
});
|
|
358
291
|
}
|
|
359
292
|
}
|
|
360
293
|
export default iamMultiselect;
|