@iamproperty/components 7.5.1--beta5 → 7.5.1--beta7

package/assets/js/components/multi-step-modal/multi-step-modal.component.js

@@ -0,0 +1,233 @@
+import { trackComponent, trackComponentRegistered } from '../_global.js';
+trackComponentRegistered('iam-multi-step-modal');
+class iamMultiStepModal extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const loadCSS = `@import "${assetLocation}/css/components/multi-step-modal.component.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <dialog>
+      <button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>
+      <div class="steps" parts="steps">
+      </div>
+      <slot></slot>
+    </dialog>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        var _a, _b;
+        const originalDialog = this.querySelector('dialog');
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const MultiStepComponent = this;
+        const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.getAttribute('id');
+        const dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('dialog');
+        const closeButton = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-close]');
+        const button = document.querySelector(`[data-modal="${id}"]`);
+        const steps = this.shadowRoot.querySelector('.steps');
+        const form = this.querySelector('form');
+        const openModal = () => {
+            dialog === null || dialog === void 0 ? void 0 : dialog.showModal();
+            dialog === null || dialog === void 0 ? void 0 : dialog.focus();
+            const closeEvent = new CustomEvent('modal-opened', {
+                bubbles: true,
+                cancelable: true,
+                detail: { modalId: id },
+            });
+            this.dispatchEvent(closeEvent);
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                event: 'openModal',
+                id: id,
+            });
+        };
+        // Disable the original event 
+        originalDialog === null || originalDialog === void 0 ? void 0 : originalDialog.addEventListener('command', (e) => {
+            if (event.command == "show-modal") {
+                e.preventDefault();
+            }
+        });
+        document.addEventListener('click', (e) => {
+            if (e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)) {
+                openModal();
+            }
+        });
+        button === null || button === void 0 ? void 0 : button.addEventListener('click', () => {
+            dialog === null || dialog === void 0 ? void 0 : dialog.showModal();
+            dialog === null || dialog === void 0 ? void 0 : dialog.focus();
+            const closeEvent = new CustomEvent('modal-opened', {
+                bubbles: true,
+                cancelable: true,
+                detail: { modalId: id },
+            });
+            this.dispatchEvent(closeEvent);
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                event: 'openModal',
+                id: id,
+            });
+        });
+        const closeModal = () => {
+            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            const closeEvent = new CustomEvent('modal-closed', {
+                bubbles: true,
+                cancelable: true,
+                detail: { modalId: id },
+            });
+            this.dispatchEvent(closeEvent);
+            window.dataLayer = window.dataLayer || [];
+            window.dataLayer.push({
+                event: 'closeModal',
+                id: id,
+            });
+        };
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {
+            closeModal();
+        });
+        const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));
+        fieldsets.forEach((fieldset, index) => {
+            steps.insertAdjacentHTML('beforeend', `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? 'active' : ''}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`);
+            if (index === 0)
+                fieldset.classList.add('active');
+            const btnWrapper = document.createElement('div');
+            btnWrapper.classList.add('btn--wrapper');
+            fieldset.appendChild(btnWrapper);
+            if (index != 0)
+                btnWrapper.innerHTML += `<button data-title="${fieldsets[index - 1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
+            if (index != fieldsets.length - 1)
+                btnWrapper.innerHTML += `<button data-title="${fieldsets[index + 1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
+            // Last fieldset
+            if (index == fieldsets.length - 1) {
+                if (form && form.querySelector(':scope > button[type="submit"]')) {
+                    const existingButton = form.querySelector(':scope > button[type="submit"]');
+                    existingButton.classList.add('mb-0');
+                    btnWrapper.insertAdjacentElement('beforeend', existingButton);
+                }
+                else
+                    btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+            }
+        });
+        // Open the fieldset with an error inside
+        const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));
+        for (let i = 0; i < validatedFieldsets.length; i++) {
+            const fieldset = validatedFieldsets[i];
+            const fieldsetID = fieldset.getAttribute('data-title');
+            if (fieldset.querySelector('.is-invalid')) {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
+                    element.classList.add('active');
+                });
+                break;
+            }
+            else {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
+                    element.classList.add('valid');
+                });
+            }
+        }
+        // Prevent the bubble messages
+        MultiStepComponent.addEventListener('invalid', (function () {
+            return function (e) {
+                e.preventDefault();
+            };
+        })(), true);
+        function validateFieldset(button) {
+            const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
+                ? MultiStepComponent.querySelector(`fieldset.active`)
+                : MultiStepComponent.querySelector(`fieldset[data-title]`);
+            const currentFieldsetID = currentFieldset.getAttribute('data-title');
+            let isFieldsetValid = true;
+            currentFieldset.classList.add('was-validated');
+            Array.from(currentFieldset.querySelectorAll('input')).forEach((input) => {
+                if (!input.checkValidity())
+                    isFieldsetValid = false;
+            });
+            // If valid mode to next field set
+            if (!isFieldsetValid) {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+                    element.classList.remove('valid');
+                });
+                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+                    element.classList.remove('valid');
+                });
+            }
+            else {
+                Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+                    element.classList.add('valid');
+                });
+                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+                    element.classList.add('valid');
+                });
+            }
+            // Allow the previous button to navigate
+            if (isFieldsetValid || !button.hasAttribute('data-next')) {
+                const fieldset = MultiStepComponent.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
+                const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
+                Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {
+                    button.classList.remove('active');
+                });
+                Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {
+                    button.classList.remove('active');
+                });
+                step.classList.add('active');
+                fieldset.classList.add('active');
+            }
+            const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;
+            const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;
+            // update the progress bar
+            MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);
+        }
+        // remove error messages from server
+        MultiStepComponent.addEventListener('keydown', (event) => {
+            if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
+                const button = event.target.closest('button');
+                if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {
+                    event.preventDefault();
+                    validateFieldset(button);
+                }
+            }
+            if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
+                const input = event.target.closest('input');
+                input.classList.remove('is-invalid');
+                if (event.keyCode == 13) {
+                    event.preventDefault();
+                }
+            }
+        });
+        MultiStepComponent.addEventListener('click', (event) => {
+            if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
+                const form = event.target.closest('form');
+                form.classList.add('was-validated');
+            }
+            return null;
+        });
+        MultiStepComponent.shadowRoot.addEventListener('click', (event) => {
+            if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
+                const button = event.target.closest('button[data-title]');
+                validateFieldset(button);
+            }
+            return null;
+        });
+        trackComponent(MultiStepComponent, 'iam-multi-step', []);
+    }
+    static get observedAttributes() {
+        return ['data-image'];
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        switch (attrName) {
+            case 'data-total': {
+                if (this.shadowRoot.querySelector('.card__total'))
+                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+                break;
+            }
+        }
+    }
+}
+export default iamMultiStepModal;

package/assets/js/components/multi-step-modal/multi-step-modal.component.min.js

@@ -0,0 +1,17 @@
+/*!
+  * iamKey v7.5.1--beta7
+  * Copyright 2022-2025 iamproperty
+  */const z=g=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:g})},E=(g,i,c)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:i}),c.forEach(d=>{g.addEventListener(d,function(e){const n={event:d,element:i,target:e.target};Object.keys(e.detail).forEach(a=>{const m=e.detail[a];n[a]=m}),window.dataLayer.push(n)})}),!0);z("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=`
+    <style>
+    @layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog{--dialog-padding: 1.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;background:var(--colour-canvas-2);box-shadow:0px 2px 9px rgba(0,0,0,.11);border-radius:0.625rem;padding:var(--dialog-padding);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}dialog>*:last-child{margin-bottom:0}dialog>:is(p):last-child{padding-bottom:0}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open]{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open]:not([popover]){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([popover]){--dialog-padding: 2rem;padding:var(--dialog-padding);min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open]:not([popover]){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:500;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}.btn:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}.btn:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}.btn:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}.btn:not(:last-child){margin-right:var(--btn-margin)}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.colour-success{--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.colour-success:before,.btn.colour-success:is(:hover,:focus,.hover):not([disabled],:active,.active):before{content:"\uF00C";font-family:"Font Awesome 6 Pro";margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn[class*=fa-]:before{content:var(--fa);font-family:"Font Awesome 6 Pro";line-height:1em}.btn.btn[class*=fa-after]{padding-right:4rem}.btn.btn[class*=fa-after]:before{margin-right:0;margin-right:0.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}.btn:not(.btn-compact):before{margin-right:1rem}.btn i[class*=fa-]{font-family:"Font Awesome 6 Pro";margin-right:1rem;line-height:1em;font-style:inherit}.btn i[class*=fa-]:not(:first-child){margin-left:1rem;margin-right:0}.btn.btn--prompt:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt:after,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active):after{margin-left:1.5rem;margin-right:-0.5rem}.btn:has(select){position:relative;padding-right:3.5rem}.btn:has(select) select{all:unset !important;margin:calc(-0.75rem) calc(-2.5rem) !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:3.5rem !important;margin-right:-3.5rem !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;max-width:100% !important;outline:none;font-weight:500;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important}.btn:has(select) select option{padding:0;text-align:left;color:var(--colour-primary)}.btn:has(select):after{position:absolute;top:0.625rem;right:2rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}.btn:has(select).active:after{transform:rotate(-90deg)}.btn:has(select:focus):after{transform:rotate(-90deg)}.btn-filter:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:"Font Awesome 6 Pro"}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary)}.btn-secondary:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:rgba(0,0,0,0);border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative}.btn.btn-tertiary:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}.btn.btn-tertiary.text-decoration-none:after{width:0%}.btn.btn-tertiary [class*=fa-]{margin-left:0;margin-right:.5rem}.btn.btn-tertiary [class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}.btn.btn-tertiary:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active):after{width:60% !important}.btn.btn-tertiary:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}@layer elements{.btn-action{--btn-border-width: 0.0625rem;--btn-padding-block: 0.3125rem;--btn-padding-inline: 0.3125rem;--btn-margin: 0.5rem}.btn-action:not(.btn-primary){color:var(--colour-heading)}.btn-action:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}.btn-action{border-radius:0.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem}.btn-action.btn[class*=fa-]:before{content:var(--fa);margin-right:0.375rem}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn-action,.btn-action.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) .btn-action,.btn-action:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}.btn:has(select){padding-block:0;padding-right:2rem}.btn:has(select) select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important}.btn:has(select):after{top:.2rem;right:0.5rem}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:0.5rem}.btn-compact:not(:last-child){margin-right:0.5rem}.btn-compact{text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;line-height:var(--compact-size) !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem}.btn-compact:before{content:var(--fa);position:absolute;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - 0.25rem);font-weight:900}.btn-compact[class*=fa-]:before{line-height:calc(var(--compact-size) - 0.25rem)}@container style(--theme: dark){.btn-compact[class*=fa-]:before{color:#fff}}.btn-compact.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}.btn-compact.btn-action{--compact-size: 2rem;font-size:1rem}.btn-compact.btn-action:before{font-size:1em;font-weight:400}.btn-compact.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:rgba(0,0,0,0)}.btn-compact.btn-secondary:not([class*=colour-]){--colour: var(--colour-light)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour)}.btn-compact.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse):is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}.btn-compact[data-number]{position:relative}.btn-compact[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:#fff;letter-spacing:-0.1em;font-family:arial,sans-serif}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:not(:hover,:focus,.hover,:focus-within):not(.btn-collapse){background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse),.invert-colours .btn-compact.btn-secondary:is(:hover,:focus,.hover,:focus-within):not([disabled]):not(.btn-collapse){background-color:rgba(0,0,0,0);border-color:var(--colour-inverted) !important;color:var(--colour-inverted)}[class*=bg-]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert) .btn-compact.btn-secondary[disabled],.invert-colours .btn-compact.btn-secondary[disabled]{background-color:var(--colour-inverted) !important;border-color:var(--colour-inverted) !important;color:var(--colour-primary-theme) !important}}*,*:before,*:after{box-sizing:border-box}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 */
+
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <dialog>
+      <button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>
+      <div class="steps" parts="steps">
+      </div>
+      <slot></slot>
+    </dialog>
+    `,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){var i,c;const d=this.querySelector("dialog"),e=this,n=this.hasAttribute("id")?this.getAttribute("id"):d?.getAttribute("id"),a=(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("dialog"),m=(c=this.shadowRoot)===null||c===void 0?void 0:c.querySelector("[data-close]"),p=document.querySelector(`[data-modal="${n}"]`),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:n}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:n})};d?.addEventListener("command",t=>{event.command=="show-modal"&&t.preventDefault()}),document.addEventListener("click",t=>{(t.target.matches(`[command="show-modal"][commandfor="${n}"]`)||t.target.matches(`[data-modal="${n}"]`))&&y()}),p?.addEventListener("click",()=>{a?.showModal(),a?.focus();const t=new CustomEvent("modal-opened",{bubbles:!0,cancelable:!0,detail:{modalId:n}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openModal",id:n})});const k=()=>{a?.close();const t=new CustomEvent("modal-closed",{bubbles:!0,cancelable:!0,detail:{modalId:n}});this.dispatchEvent(t),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"closeModal",id:n})};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 r=document.createElement("div");if(r.classList.add("btn--wrapper"),t.appendChild(r),o!=0&&(r.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&&(r.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 s=u.querySelector(':scope > button[type="submit"]');s.classList.add("mb-0"),r.insertAdjacentElement("beforeend",s)}else r.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],r=o.getAttribute("data-title");if(o.querySelector(".is-invalid")){Array.from(e.querySelectorAll(`[data-title="${r}"]`)).forEach(s=>{s.classList.add("active")});break}else Array.from(e.querySelectorAll(`[data-title="${r}"]`)).forEach(s=>{s.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]"),r=o.getAttribute("data-title");let s=!0;if(o.classList.add("was-validated"),Array.from(o.querySelectorAll("input")).forEach(l=>{l.checkValidity()||(s=!1)}),s?(Array.from(e.querySelectorAll(`[data-title="${r}"]`)).forEach(l=>{l.classList.add("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${r}"]`)).forEach(l=>{l.classList.add("valid")})):(Array.from(e.querySelectorAll(`[data-title="${r}"]`)).forEach(l=>{l.classList.remove("valid")}),Array.from(e.shadowRoot.querySelectorAll(`[data-title="${r}"]`)).forEach(l=>{l.classList.remove("valid")})),s||!t.hasAttribute("data-next")){const l=e.querySelector(`fieldset[data-title="${t.getAttribute("data-title")}"]`),A=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")}),A.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,c,d){switch(i){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=d);break}}}}export{S as default};
+//# sourceMappingURL=multi-step-modal.component.min.js.map

package/assets/js/components/multi-step-modal/multi-step-modal.component.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-step-modal.component.min.js","sources":["../_global.js","multi-step-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","import { trackComponent, trackComponentRegistered } from '../_global.js';\ntrackComponentRegistered('iam-multi-step-modal');\nclass iamMultiStepModal 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/multi-step-modal.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n    <dialog>\n      <button class=\"btn btn-compact btn-secondary fa-xmark-large\" data-close>Close</button>\n      <div class=\"steps\" parts=\"steps\">\n      </div>\n      <slot></slot>\n    </dialog>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        var _a, _b;\n        const originalDialog = this.querySelector('dialog');\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const MultiStepComponent = this;\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 button = document.querySelector(`[data-modal=\"${id}\"]`);\n        const steps = this.shadowRoot.querySelector('.steps');\n        const form = this.querySelector('form');\n        const openModal = () => {\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            this.dispatchEvent(closeEvent);\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                event: 'openModal',\n                id: id,\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        document.addEventListener('click', (e) => {\n            if (e.target.matches(`[command=\"show-modal\"][commandfor=\"${id}\"]`) || e.target.matches(`[data-modal=\"${id}\"]`)) {\n                openModal();\n            }\n        });\n        button === null || button === void 0 ? void 0 : button.addEventListener('click', () => {\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            this.dispatchEvent(closeEvent);\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                event: 'openModal',\n                id: id,\n            });\n        });\n        const closeModal = () => {\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            this.dispatchEvent(closeEvent);\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer.push({\n                event: 'closeModal',\n                id: id,\n            });\n        };\n        closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {\n            closeModal();\n        });\n        const fieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset[data-title]'));\n        fieldsets.forEach((fieldset, index) => {\n            steps.insertAdjacentHTML('beforeend', `<button data-title=\"${fieldset.getAttribute('data-title')}\" type=\"button\" class=\"${index == 0 ? 'active' : ''}\" tabindex=\"-1\">${fieldset.getAttribute('data-title')}</button>`);\n            if (index === 0)\n                fieldset.classList.add('active');\n            const btnWrapper = document.createElement('div');\n            btnWrapper.classList.add('btn--wrapper');\n            fieldset.appendChild(btnWrapper);\n            if (index != 0)\n                btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index - 1].getAttribute('data-title')}\" class=\"btn btn-secondary mb-0\" data-previous type=\"button\">Previous</button>`;\n            if (index != fieldsets.length - 1)\n                btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index + 1].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"button\">Next</button>`;\n            // Last fieldset\n            if (index == fieldsets.length - 1) {\n                if (form && form.querySelector(':scope > button[type=\"submit\"]')) {\n                    const existingButton = form.querySelector(':scope > button[type=\"submit\"]');\n                    existingButton.classList.add('mb-0');\n                    btnWrapper.insertAdjacentElement('beforeend', existingButton);\n                }\n                else\n                    btnWrapper.innerHTML += `<button data-title=\"${fieldsets[index].getAttribute('data-title')}\" class=\"btn btn-primary mb-0\" data-next type=\"submit\">Submit</button>`;\n            }\n        });\n        // Open the fieldset with an error inside\n        const validatedFieldsets = Array.from(MultiStepComponent.querySelectorAll('fieldset.was-validated'));\n        for (let i = 0; i < validatedFieldsets.length; i++) {\n            const fieldset = validatedFieldsets[i];\n            const fieldsetID = fieldset.getAttribute('data-title');\n            if (fieldset.querySelector('.is-invalid')) {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('active');\n                });\n                break;\n            }\n            else {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${fieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n            }\n        }\n        // Prevent the bubble messages\n        MultiStepComponent.addEventListener('invalid', (function () {\n            return function (e) {\n                e.preventDefault();\n            };\n        })(), true);\n        function validateFieldset(button) {\n            const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)\n                ? MultiStepComponent.querySelector(`fieldset.active`)\n                : MultiStepComponent.querySelector(`fieldset[data-title]`);\n            const currentFieldsetID = currentFieldset.getAttribute('data-title');\n            let isFieldsetValid = true;\n            currentFieldset.classList.add('was-validated');\n            Array.from(currentFieldset.querySelectorAll('input')).forEach((input) => {\n                if (!input.checkValidity())\n                    isFieldsetValid = false;\n            });\n            // If valid mode to next field set\n            if (!isFieldsetValid) {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.remove('valid');\n                });\n                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.remove('valid');\n                });\n            }\n            else {\n                Array.from(MultiStepComponent.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n                Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title=\"${currentFieldsetID}\"]`)).forEach((element) => {\n                    element.classList.add('valid');\n                });\n            }\n            // Allow the previous button to navigate\n            if (isFieldsetValid || !button.hasAttribute('data-next')) {\n                const fieldset = MultiStepComponent.querySelector(`fieldset[data-title=\"${button.getAttribute('data-title')}\"]`);\n                const step = MultiStepComponent.shadowRoot.querySelector(`.steps button[data-title=\"${button.getAttribute('data-title')}\"]`);\n                Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {\n                    button.classList.remove('active');\n                });\n                Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {\n                    button.classList.remove('active');\n                });\n                step.classList.add('active');\n                fieldset.classList.add('active');\n            }\n            const fieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset`)).length;\n            const validFieldsetCount = Array.from(MultiStepComponent.querySelectorAll(`fieldset.valid`)).length;\n            // update the progress bar\n            MultiStepComponent.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1)) * 100}%`);\n        }\n        // remove error messages from server\n        MultiStepComponent.addEventListener('keydown', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button')) {\n                const button = event.target.closest('button');\n                if (event.keyCode == 13 && button.getAttribute('type') != 'submit') {\n                    event.preventDefault();\n                    validateFieldset(button);\n                }\n            }\n            if (event && event.target instanceof HTMLElement && event.target.closest('input')) {\n                const input = event.target.closest('input');\n                input.classList.remove('is-invalid');\n                if (event.keyCode == 13) {\n                    event.preventDefault();\n                }\n            }\n        });\n        MultiStepComponent.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button[type=\"submit\"]')) {\n                const form = event.target.closest('form');\n                form.classList.add('was-validated');\n            }\n            return null;\n        });\n        MultiStepComponent.shadowRoot.addEventListener('click', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {\n                const button = event.target.closest('button[data-title]');\n                validateFieldset(button);\n            }\n            return null;\n        });\n        trackComponent(MultiStepComponent, 'iam-multi-step', []);\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-total': {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n        }\n    }\n}\nexport default iamMultiStepModal;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","iamMultiStepModal","template","_a","_b","originalDialog","MultiStepComponent","id","dialog","closeButton","button","steps","form","openModal","closeEvent","e","closeModal","fieldsets","fieldset","index","btnWrapper","existingButton","validatedFieldsets","i","fieldsetID","element","validateFieldset","currentFieldset","currentFieldsetID","isFieldsetValid","input","step","fieldsetCount","validFieldsetCount","attrName","oldVal","newVal"],"mappings":"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"}

package/assets/js/components/multiselect/multiselect.component.js

@@ -39,7 +39,7 @@ class iamMultiselect extends HTMLElement {
       <div class="admin-panel dropdown" part="dropdown">
         <slot></slot>
       </div>
-      <button id="clear"><span class="visually-hidden">Clear</span></button>
+      <button id="clear" class="btn btn-action "><span class="visually-hidden">Clear</span></button>
     </div>
     </div>
     </label>