@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/js/components/menu/menu.component.js

@@ -19,182 +19,169 @@ class iamMenu extends HTMLElement {
     connectedCallback() {
         const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
         const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
-        const menuInner = this.shadowRoot.querySelector('.menu--inner');
-        const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
-        const menuItems = this.querySelectorAll('a, button');
+        let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
+        let menuItems = this.querySelectorAll('a, button');
+        if (this.closest('.menu__wrapper')) {
+            menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+            topLevelmenuItems = menuItems;
+        }
         const subMenus = this.querySelectorAll('details');
         let subNextIndex;
         let subPrevIndex;
         // Set the needed CSS styles to connect the ID attribute to the anchor name
         if (menuID && menuButton) {
-            menuInner === null || menuInner === void 0 ? void 0 : menuInner.setAttribute('role', 'menu');
+            this.setAttribute('role', 'menu');
             this.style['position-anchor'] = `--${menuID}`;
             menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');
             menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;
             menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);
-            subMenus.forEach((item, index) => {
-                item.setAttribute('role', 'menu');
-            });
-            menuItems.forEach((item, index) => {
-                item.setAttribute('role', 'menuitem');
-                item.setAttribute('tabindex', '0');
-                if (index == 0) {
-                    item.setAttribute('autofocus', true);
-                }
-            });
-            this.addEventListener('keydown', (event) => {
-                if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
-                    const activeItem = document.activeElement;
-                    const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
-                    const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
-                    switch (event.keyCode // change to event.key to key to use the above variable
-                    ) {
-                        case 27: // Esc
-                            if (activeItem.closest('details')) {
-                                event.stopPropagation();
-                                event.preventDefault();
-                                activeItem.closest('details').removeAttribute('open');
-                                activeItem.closest('details').querySelector(':scope summary').focus();
-                            }
-                            else {
-                                event.stopPropagation();
-                                menuButton.focus();
-                            }
-                            break;
-                        case 32: // Space
-                        case 13: // Enter
-                            if (activeItem.matches('summary') && !activeItem.parentElement.matches('details[open]')) {
-                                activeItem.parentElement.setAttribute('open', true);
-                                const subMenuItems = activeItem
-                                    .closest('details')
-                                    .querySelectorAll('a, button, :scope details > summary');
-                                Array.from(subMenuItems)[0].focus();
-                            }
-                            break;
-                        case 35: // end
-                            event.stopPropagation();
-                            event.preventDefault();
-                            this.querySelector('details[open]').removeAttribute('open');
-                            Array.from(menuItems)[menuItems.length - 1].focus();
-                            break;
-                        case 36: // home
-                            event.stopPropagation();
-                            event.preventDefault();
-                            this.querySelector('details[open]').removeAttribute('open');
-                            Array.from(menuItems)[0].focus();
-                            break;
-                        case 38: // up
+        }
+        menuItems.forEach((item, index) => {
+            item.setAttribute('role', 'menuitem');
+            item.setAttribute('tabindex', '0');
+            if (index == 0) {
+                item.setAttribute('autofocus', true);
+            }
+        });
+        this.addEventListener('keydown', (event) => {
+            if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
+                const activeItem = document.activeElement;
+                const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+                const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+                switch (event.keyCode // change to event.key to key to use the above variable
+                ) {
+                    case 27: // Esc
+                        if (activeItem.closest('details')) {
                             event.stopPropagation();
                             event.preventDefault();
-                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
-                                if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
-                                    Array.from(topLevelmenuItems)[prevIndex].focus();
-                                else
-                                    Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
-                            }
-                            else if (activeItem.closest('details')) {
-                                const subMenuItems = activeItem
-                                    .closest('details')
-                                    .querySelectorAll('a, button, :scope details > summary');
-                                subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
-                                if (Array.from(subMenuItems)[subPrevIndex] != undefined)
-                                    Array.from(subMenuItems)[subPrevIndex].focus();
-                                else
-                                    Array.from(subMenuItems)[subMenuItems.length - 1].focus();
-                            }
-                            break;
-                        case 40: // down
+                            activeItem.closest('details').removeAttribute('open');
+                            activeItem.closest('details').querySelector(':scope summary').focus();
+                        }
+                        else {
                             event.stopPropagation();
-                            event.preventDefault();
-                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
-                                if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
-                                    Array.from(topLevelmenuItems)[nextIndex].focus();
-                                else
-                                    Array.from(topLevelmenuItems)[0].focus();
-                            }
-                            else if (activeItem.closest('details')) {
-                                const subMenuItems = activeItem
-                                    .closest('details')
-                                    .querySelectorAll('a, button, :scope details > summary');
-                                subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
-                                if (Array.from(subMenuItems)[subNextIndex] != undefined)
-                                    Array.from(subMenuItems)[subNextIndex].focus();
-                                else
-                                    Array.from(subMenuItems)[0].focus();
-                            }
-                            break;
-                    }
+                            menuButton.focus();
+                        }
+                        break;
+                    case 32: // Space
+                    case 13: // Enter
+                        break;
+                    case 35: // end
+                        event.stopPropagation();
+                        event.preventDefault();
+                        this.querySelector('details[open]').removeAttribute('open');
+                        Array.from(menuItems)[menuItems.length - 1].focus();
+                        break;
+                    case 36: // home
+                        event.stopPropagation();
+                        event.preventDefault();
+                        this.querySelector('details[open]').removeAttribute('open');
+                        Array.from(menuItems)[0].focus();
+                        break;
+                    case 38: // up
+                        event.stopPropagation();
+                        event.preventDefault();
+                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                            if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+                                Array.from(topLevelmenuItems)[prevIndex].focus();
+                            else
+                                Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+                        }
+                        else if (activeItem.closest('details')) {
+                            const subMenuItems = activeItem
+                                .closest('details')
+                                .querySelectorAll('a, button, :scope details > summary');
+                            subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+                            if (Array.from(subMenuItems)[subPrevIndex] != undefined)
+                                Array.from(subMenuItems)[subPrevIndex].focus();
+                            else
+                                Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+                        }
+                        break;
+                    case 40: // down
+                        event.stopPropagation();
+                        event.preventDefault();
+                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                            if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+                                Array.from(topLevelmenuItems)[nextIndex].focus();
+                            else
+                                Array.from(topLevelmenuItems)[0].focus();
+                        }
+                        else if (activeItem.closest('details')) {
+                            const subMenuItems = activeItem
+                                .closest('details')
+                                .querySelectorAll('a, button, :scope details > summary');
+                            subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+                            if (Array.from(subMenuItems)[subNextIndex] != undefined)
+                                Array.from(subMenuItems)[subNextIndex].focus();
+                            else
+                                Array.from(subMenuItems)[0].focus();
+                        }
+                        break;
+                }
+            }
+        });
+        this.addEventListener('toggle', (e) => {
+            var _a, _b, _c, _d;
+            const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });
+            this.dispatchEvent(updateEvent);
+            // Fix the focus
+            if (this.closest('.menu__wrapper')) {
+                menuItems[0].focus();
+            }
+            if (this.hasAttribute('popover-open')) {
+                e.preventDefault();
+                this.removeAttribute('popover-open');
+                this.hidePopover();
+            }
+            if (this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) {
+                (_a = document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');
+                (_b = document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) === null || _b === void 0 ? void 0 : _b.classList.add('active');
+            }
+            else {
+                (_c = document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-pressed');
+                (_d = document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) === null || _d === void 0 ? void 0 : _d.classList.remove('active');
+            }
+        });
+        this.addEventListener('click', (event) => {
+            if (event &&
+                event.target instanceof HTMLElement &&
+                event.target.closest('button:has(+ iam-menu:not([popover]))')) {
+                const button = event.target.closest('button:has(+ iam-menu)');
+                button === null || button === void 0 ? void 0 : button.classList.toggle('open');
+            }
+            else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {
+                const button = event.target.closest('button.selectable');
+                if (this.hasAttribute('multiple')) {
+                    button.classList.toggle('selected');
+                }
+                else if (button === null || button === void 0 ? void 0 : button.classList.contains('selected')) {
+                    this.querySelectorAll('.selected').forEach((item) => {
+                        item.classList.remove('selected');
+                    });
+                }
+                else {
+                    this.querySelectorAll('.selected').forEach((item) => {
+                        item.classList.remove('selected');
+                    });
+                    button.classList.add('selected');
+                }
+            }
+        });
+        // safari and firefox anchor fix for cards
+        if (!CSS.supports('top', 'anchor(top)')) {
+            document.addEventListener('click', (event) => {
+                if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {
+                    const button = event.originalTarget;
+                    const popoverID = button.getAttribute('popovertarget');
+                    const popover = document.getElementById(popoverID);
+                    const viewportOffset = button.getBoundingClientRect();
+                    const top = viewportOffset.top;
+                    const left = viewportOffset.left;
+                    popover.style.setProperty('top', top + 'px');
+                    popover.style.setProperty('left', left + button.clientWidth + 'px');
                 }
             });
         }
-        // insert extra CSS to help style inline details and summary items to allow collapsible sub menus
-        if (this.querySelector('details') && !document.getElementById('menuGlobalStyles'))
-            document.head.insertAdjacentHTML('beforeend', `<style id="menuGlobalStyles">
-iam-menu details > * {
-  background: unset !important;
-  border: unset !important;
-  color: inherit!important;
-  font-weight: inherit!important;
-  font-family: inherit!important;
-  font-size: 1rem!important;
-  display: block!important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-  padding: var(--menu-item-padding, 0)!important;
-  width: var(--menu-item-width, 100%)!important;
-  text-align: var(--menu-item-text-align, left)!important;
-  cursor: var(--menu-item-cursor, pointer)!important;
-}
-iam-menu details > *:after,
-iam-menu details > *:not(summary):before {
-  display: none!important;
-}
-iam-menu details :is(button,a) {
-  padding-inline-start: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details :is(button,a):last-child {
-  margin-block-end: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details summary {
-  padding: 0 !important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-}
-iam-menu details summary:before {
-  text-align: center;
-  display: inline-block!important;
-  vertical-align: bottom;
-  float: right;
-  color: inherit;
-  height: 1em;
-  width: 1em;
-}
-
-iam-menu details summary[class*="fa-"]:before {
-  font-family: var(--fa-font-family, "Font Awesome 6 Pro");
-}
-
-iam-menu details summary:not([class*="fa-"]:before {
-  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");  
-  
-  content: ""!important;
-  height: 1.2rem;
-  width: 1.2rem;
-  background: var(--colour-primary-theme);
-  mask-image: var(--icon, var(--icon-arrow));
-  mask-size: 50%;
-  mask-repeat: no-repeat;
-  mask-position: 50% 50%;
-  -webkit-mask-image: var(--icon, var(--icon-arrow));
-  -webkit-mask-size: 50%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: 50% 50%;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: bottom;
-  float: right;
-  rotate: 90deg;
-  color: inherit;
-}
-</style>`);
     }
 }
 export default iamMenu;

package/assets/js/components/menu/menu.component.min.js

@@ -1,77 +1,12 @@
 /*!
-  * iamKey v7.2.2--beta3
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
-  */class p 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=`
+  */class d 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=`
     <style>
-    @layer components{iam-menu:defined{--menu-padding: 1rem;--border-color: var(--colour-border);--menu-item-margin: 0 0 0.5rem 0;border:none;border-radius:1rem;box-shadow:0px 2px 9px rgba(0, 0, 0, 0.1)}}/*# sourceMappingURL=assets/css/components/menu.css.map */
+    @layer components{iam-menu:defined{--menu-padding: 0.5rem;--border-color: var(--colour-border);--menu-item-margin: 0 0 0.5rem 0}iam-menu i{width:1.25rem}iam-menu>button:has(+iam-menu){position:relative}iam-menu>button:has(+iam-menu):after{content:"";height:var(--btn-line-height);width:1rem;height: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;position:absolute;top:calc(50% - .5rem);right:.5rem}iam-menu>button:has(+iam-menu:not([popover])):after{rotate:90deg}iam-menu>button.open:has(+iam-menu:not([popover])){position:relative}iam-menu>button.open:has(+iam-menu:not([popover])):after{top:calc(50% - .5rem);right:.5rem;rotate:270deg}iam-menu>button:has(+iam-menu:popover-open){position:relative}iam-menu>button:has(+iam-menu:popover-open):after{top:calc(50% - .5rem);right:.5rem;rotate:180deg}iam-menu>button:not(.open)+iam-menu:not([popover]){display:none}iam-menu>button+iam-menu:not([popover])>*:is(button,a,label){padding-left:2rem}}/*# sourceMappingURL=assets/css/components/menu.css.map */
 
     </style>
     <div class="menu--inner" part="inner">
       <slot></slot>
-    </div>`,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){const i=this.hasAttribute("id")?this.getAttribute("id"):!1,o=document.querySelector(`[popovertarget="${i}"]`),n=this.shadowRoot.querySelector(".menu--inner"),a=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),s=this.querySelectorAll("a, button"),d=this.querySelectorAll("details");let m,l;i&&o&&(n?.setAttribute("role","menu"),this.style["position-anchor"]=`--${i}`,o?.setAttribute("aria-haspopup","true"),o==null||(o.style["anchor-name"]=`--${i}`),o?.setAttribute("aria-controls",i),d.forEach((e,t)=>{e.setAttribute("role","menu")}),s.forEach((e,t)=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0"),t==0&&e.setAttribute("autofocus",!0)}),this.addEventListener("keydown",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("a, button, summary")){const t=document.activeElement,u=Array.from(a).indexOf(t)-1,c=Array.from(a).indexOf(t)+1;switch(e.keyCode){case 27:t.closest("details")?(e.stopPropagation(),e.preventDefault(),t.closest("details").removeAttribute("open"),t.closest("details").querySelector(":scope summary").focus()):(e.stopPropagation(),o.focus());break;case 32:case 13:if(t.matches("summary")&&!t.parentElement.matches("details[open]")){t.parentElement.setAttribute("open",!0);const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");Array.from(r)[0].focus()}break;case 35:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(s)[s.length-1].focus();break;case 36:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(s)[0].focus();break;case 38:if(e.stopPropagation(),e.preventDefault(),Array.from(a).indexOf(t)>-1)Array.from(a)[u]!=null?Array.from(a)[u].focus():Array.from(a)[a.length-1].focus();else if(t.closest("details")){const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");l=Array.from(r).indexOf(t)-1,Array.from(r)[l]!=null?Array.from(r)[l].focus():Array.from(r)[r.length-1].focus()}break;case 40:if(e.stopPropagation(),e.preventDefault(),Array.from(a).indexOf(t)>-1)Array.from(a)[c]!=null?Array.from(a)[c].focus():Array.from(a)[0].focus();else if(t.closest("details")){const r=t.closest("details").querySelectorAll("a, button, :scope details > summary");m=Array.from(r).indexOf(t)+1,Array.from(r)[m]!=null?Array.from(r)[m].focus():Array.from(r)[0].focus()}break}}})),this.querySelector("details")&&!document.getElementById("menuGlobalStyles")&&document.head.insertAdjacentHTML("beforeend",`<style id="menuGlobalStyles">
-iam-menu details > * {
-  background: unset !important;
-  border: unset !important;
-  color: inherit!important;
-  font-weight: inherit!important;
-  font-family: inherit!important;
-  font-size: 1rem!important;
-  display: block!important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-  padding: var(--menu-item-padding, 0)!important;
-  width: var(--menu-item-width, 100%)!important;
-  text-align: var(--menu-item-text-align, left)!important;
-  cursor: var(--menu-item-cursor, pointer)!important;
-}
-iam-menu details > *:after,
-iam-menu details > *:not(summary):before {
-  display: none!important;
-}
-iam-menu details :is(button,a) {
-  padding-inline-start: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details :is(button,a):last-child {
-  margin-block-end: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details summary {
-  padding: 0 !important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-}
-iam-menu details summary:before {
-  text-align: center;
-  display: inline-block!important;
-  vertical-align: bottom;
-  float: right;
-  color: inherit;
-  height: 1em;
-  width: 1em;
-}
-
-iam-menu details summary[class*="fa-"]:before {
-  font-family: var(--fa-font-family, "Font Awesome 6 Pro");
-}
-
-iam-menu details summary:not([class*="fa-"]:before {
-  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");  
-  
-  content: ""!important;
-  height: 1.2rem;
-  width: 1.2rem;
-  background: var(--colour-primary-theme);
-  mask-image: var(--icon, var(--icon-arrow));
-  mask-size: 50%;
-  mask-repeat: no-repeat;
-  mask-position: 50% 50%;
-  -webkit-mask-image: var(--icon, var(--icon-arrow));
-  -webkit-mask-size: 50%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: 50% 50%;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: bottom;
-  float: right;
-  rotate: 90deg;
-  color: inherit;
-}
-</style>`)}}export{p as default};
+    </div>`,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){const n=this.hasAttribute("id")?this.getAttribute("id"):!1,a=document.querySelector(`[popovertarget="${n}"]`);let r=this.querySelectorAll(":scope > a, :scope > button, :scope > details > summary"),l=this.querySelectorAll("a, button");this.closest(".menu__wrapper")&&(l=this.shadowRoot.querySelector("slot").assignedElements({flatten:!0}),r=l),this.querySelectorAll("details");let u,c;n&&a&&(this.setAttribute("role","menu"),this.style["position-anchor"]=`--${n}`,a?.setAttribute("aria-haspopup","true"),a==null||(a.style["anchor-name"]=`--${n}`),a?.setAttribute("aria-controls",n)),l.forEach((e,t)=>{e.setAttribute("role","menuitem"),e.setAttribute("tabindex","0"),t==0&&e.setAttribute("autofocus",!0)}),this.addEventListener("keydown",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("a, button, summary")){const t=document.activeElement,s=Array.from(r).indexOf(t)-1,i=Array.from(r).indexOf(t)+1;switch(e.keyCode){case 27:t.closest("details")?(e.stopPropagation(),e.preventDefault(),t.closest("details").removeAttribute("open"),t.closest("details").querySelector(":scope summary").focus()):(e.stopPropagation(),a.focus());break;case 32:case 13:break;case 35:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[l.length-1].focus();break;case 36:e.stopPropagation(),e.preventDefault(),this.querySelector("details[open]").removeAttribute("open"),Array.from(l)[0].focus();break;case 38:if(e.stopPropagation(),e.preventDefault(),Array.from(r).indexOf(t)>-1)Array.from(r)[s]!=null?Array.from(r)[s].focus():Array.from(r)[r.length-1].focus();else if(t.closest("details")){const o=t.closest("details").querySelectorAll("a, button, :scope details > summary");c=Array.from(o).indexOf(t)-1,Array.from(o)[c]!=null?Array.from(o)[c].focus():Array.from(o)[o.length-1].focus()}break;case 40:if(e.stopPropagation(),e.preventDefault(),Array.from(r).indexOf(t)>-1)Array.from(r)[i]!=null?Array.from(r)[i].focus():Array.from(r)[0].focus();else if(t.closest("details")){const o=t.closest("details").querySelectorAll("a, button, :scope details > summary");u=Array.from(o).indexOf(t)+1,Array.from(o)[u]!=null?Array.from(o)[u].focus():Array.from(o)[0].focus()}break}}}),this.addEventListener("toggle",e=>{var t,s,i,o;const m=new CustomEvent(e.newState,{detail:{id:this.getAttribute("id"),target:e.target}});this.dispatchEvent(m),this.closest(".menu__wrapper")&&l[0].focus(),this.hasAttribute("popover-open")&&(e.preventDefault(),this.removeAttribute("popover-open"),this.hidePopover()),this.matches(":popover-open")&&document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`)?((t=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||t===void 0||t.setAttribute("aria-pressed","true"),(s=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||s===void 0||s.classList.add("active")):((i=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||i===void 0||i.removeAttribute("aria-pressed"),(o=document.querySelector(`[popovertarget="${this.getAttribute("id")}"]`))===null||o===void 0||o.classList.remove("active"))}),this.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest("button:has(+ iam-menu:not([popover]))")){const t=e.target.closest("button:has(+ iam-menu)");t?.classList.toggle("open")}else if(e&&e.target instanceof HTMLElement&&e.target.closest("button.selectable")){const t=e.target.closest("button.selectable");this.hasAttribute("multiple")?t.classList.toggle("selected"):t?.classList.contains("selected")?this.querySelectorAll(".selected").forEach(s=>{s.classList.remove("selected")}):(this.querySelectorAll(".selected").forEach(s=>{s.classList.remove("selected")}),t.classList.add("selected"))}}),CSS.supports("top","anchor(top)")||document.addEventListener("click",e=>{if(e.originalTarget&&e.originalTarget.matches("[popovertarget]")){const t=e.originalTarget,s=t.getAttribute("popovertarget"),i=document.getElementById(s),o=t.getBoundingClientRect(),m=o.top,p=o.left;i.style.setProperty("top",m+"px"),i.style.setProperty("left",p+t.clientWidth+"px")}})}}export{d as default};
 //# sourceMappingURL=menu.component.min.js.map

package/assets/js/components/menu/menu.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.component.min.js","sources":["menu.component.js"],"sourcesContent":["class iamMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"menu--inner\" part=\"inner\">\n      <slot></slot>\n    </div>`;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n        const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n        const menuInner = this.shadowRoot.querySelector('.menu--inner');\n        const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n        const menuItems = this.querySelectorAll('a, button');\n        const subMenus = this.querySelectorAll('details');\n        let subNextIndex;\n        let subPrevIndex;\n        // Set the needed CSS styles to connect the ID attribute to the anchor name\n        if (menuID && menuButton) {\n            menuInner === null || menuInner === void 0 ? void 0 : menuInner.setAttribute('role', 'menu');\n            this.style['position-anchor'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n            subMenus.forEach((item, index) => {\n                item.setAttribute('role', 'menu');\n            });\n            menuItems.forEach((item, index) => {\n                item.setAttribute('role', 'menuitem');\n                item.setAttribute('tabindex', '0');\n                if (index == 0) {\n                    item.setAttribute('autofocus', true);\n                }\n            });\n            this.addEventListener('keydown', (event) => {\n                if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n                    const activeItem = document.activeElement;\n                    const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n                    const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n                    switch (event.keyCode // change to event.key to key to use the above variable\n                    ) {\n                        case 27: // Esc\n                            if (activeItem.closest('details')) {\n                                event.stopPropagation();\n                                event.preventDefault();\n                                activeItem.closest('details').removeAttribute('open');\n                                activeItem.closest('details').querySelector(':scope summary').focus();\n                            }\n                            else {\n                                event.stopPropagation();\n                                menuButton.focus();\n                            }\n                            break;\n                        case 32: // Space\n                        case 13: // Enter\n                            if (activeItem.matches('summary') && !activeItem.parentElement.matches('details[open]')) {\n                                activeItem.parentElement.setAttribute('open', true);\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                Array.from(subMenuItems)[0].focus();\n                            }\n                            break;\n                        case 35: // end\n                            event.stopPropagation();\n                            event.preventDefault();\n                            this.querySelector('details[open]').removeAttribute('open');\n                            Array.from(menuItems)[menuItems.length - 1].focus();\n                            break;\n                        case 36: // home\n                            event.stopPropagation();\n                            event.preventDefault();\n                            this.querySelector('details[open]').removeAttribute('open');\n                            Array.from(menuItems)[0].focus();\n                            break;\n                        case 38: // up\n                            event.stopPropagation();\n                            event.preventDefault();\n                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                                if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n                                    Array.from(topLevelmenuItems)[prevIndex].focus();\n                                else\n                                    Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n                            }\n                            else if (activeItem.closest('details')) {\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n                                if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n                                    Array.from(subMenuItems)[subPrevIndex].focus();\n                                else\n                                    Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n                            }\n                            break;\n                        case 40: // down\n                            event.stopPropagation();\n                            event.preventDefault();\n                            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                                if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n                                    Array.from(topLevelmenuItems)[nextIndex].focus();\n                                else\n                                    Array.from(topLevelmenuItems)[0].focus();\n                            }\n                            else if (activeItem.closest('details')) {\n                                const subMenuItems = activeItem\n                                    .closest('details')\n                                    .querySelectorAll('a, button, :scope details > summary');\n                                subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n                                if (Array.from(subMenuItems)[subNextIndex] != undefined)\n                                    Array.from(subMenuItems)[subNextIndex].focus();\n                                else\n                                    Array.from(subMenuItems)[0].focus();\n                            }\n                            break;\n                    }\n                }\n            });\n        }\n        // insert extra CSS to help style inline details and summary items to allow collapsible sub menus\n        if (this.querySelector('details') && !document.getElementById('menuGlobalStyles'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"menuGlobalStyles\">\niam-menu details > * {\n  background: unset !important;\n  border: unset !important;\n  color: inherit!important;\n  font-weight: inherit!important;\n  font-family: inherit!important;\n  font-size: 1rem!important;\n  display: block!important;\n  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;\n  padding: var(--menu-item-padding, 0)!important;\n  width: var(--menu-item-width, 100%)!important;\n  text-align: var(--menu-item-text-align, left)!important;\n  cursor: var(--menu-item-cursor, pointer)!important;\n}\niam-menu details > *:after,\niam-menu details > *:not(summary):before {\n  display: none!important;\n}\niam-menu details :is(button,a) {\n  padding-inline-start: var(--menu-dialog-offset,1rem)!important;\n}\niam-menu details :is(button,a):last-child {\n  margin-block-end: var(--menu-dialog-offset,1rem)!important;\n}\niam-menu details summary {\n  padding: 0 !important;\n  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;\n}\niam-menu details summary:before {\n  text-align: center;\n  display: inline-block!important;\n  vertical-align: bottom;\n  float: right;\n  color: inherit;\n  height: 1em;\n  width: 1em;\n}\n\niam-menu details summary[class*=\"fa-\"]:before {\n  font-family: var(--fa-font-family, \"Font Awesome 6 Pro\");\n}\n\niam-menu details summary:not([class*=\"fa-\"]:before {\n  --icon-arrow: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e\");  \n  \n  content: \"\"!important;\n  height: 1.2rem;\n  width: 1.2rem;\n  background: var(--colour-primary-theme);\n  mask-image: var(--icon, var(--icon-arrow));\n  mask-size: 50%;\n  mask-repeat: no-repeat;\n  mask-position: 50% 50%;\n  -webkit-mask-image: var(--icon, var(--icon-arrow));\n  -webkit-mask-size: 50%;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: 50% 50%;\n  z-index: 2;\n  display: inline-block;\n  vertical-align: bottom;\n  float: right;\n  rotate: 90deg;\n  color: inherit;\n}\n</style>`);\n    }\n}\nexport default iamMenu;\n"],"names":["iamMenu","template","menuID","menuButton","menuInner","topLevelmenuItems","menuItems","subMenus","subNextIndex","subPrevIndex","item","index","event","activeItem","prevIndex","nextIndex","subMenuItems"],"mappings":"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"}
+{"version":3,"file":"menu.component.min.js","sources":["menu.component.js"],"sourcesContent":["class iamMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/menu.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"menu--inner\" part=\"inner\">\n      <slot></slot>\n    </div>`;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;\n        const menuButton = document.querySelector(`[popovertarget=\"${menuID}\"]`);\n        let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');\n        let menuItems = this.querySelectorAll('a, button');\n        if (this.closest('.menu__wrapper')) {\n            menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });\n            topLevelmenuItems = menuItems;\n        }\n        const subMenus = this.querySelectorAll('details');\n        let subNextIndex;\n        let subPrevIndex;\n        // Set the needed CSS styles to connect the ID attribute to the anchor name\n        if (menuID && menuButton) {\n            this.setAttribute('role', 'menu');\n            this.style['position-anchor'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-haspopup', 'true');\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.style['anchor-name'] = `--${menuID}`;\n            menuButton === null || menuButton === void 0 ? void 0 : menuButton.setAttribute('aria-controls', menuID);\n        }\n        menuItems.forEach((item, index) => {\n            item.setAttribute('role', 'menuitem');\n            item.setAttribute('tabindex', '0');\n            if (index == 0) {\n                item.setAttribute('autofocus', true);\n            }\n        });\n        this.addEventListener('keydown', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {\n                const activeItem = document.activeElement;\n                const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;\n                const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;\n                switch (event.keyCode // change to event.key to key to use the above variable\n                ) {\n                    case 27: // Esc\n                        if (activeItem.closest('details')) {\n                            event.stopPropagation();\n                            event.preventDefault();\n                            activeItem.closest('details').removeAttribute('open');\n                            activeItem.closest('details').querySelector(':scope summary').focus();\n                        }\n                        else {\n                            event.stopPropagation();\n                            menuButton.focus();\n                        }\n                        break;\n                    case 32: // Space\n                    case 13: // Enter\n                        break;\n                    case 35: // end\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[menuItems.length - 1].focus();\n                        break;\n                    case 36: // home\n                        event.stopPropagation();\n                        event.preventDefault();\n                        this.querySelector('details[open]').removeAttribute('open');\n                        Array.from(menuItems)[0].focus();\n                        break;\n                    case 38: // up\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[prevIndex] != undefined)\n                                Array.from(topLevelmenuItems)[prevIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;\n                            if (Array.from(subMenuItems)[subPrevIndex] != undefined)\n                                Array.from(subMenuItems)[subPrevIndex].focus();\n                            else\n                                Array.from(subMenuItems)[subMenuItems.length - 1].focus();\n                        }\n                        break;\n                    case 40: // down\n                        event.stopPropagation();\n                        event.preventDefault();\n                        if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {\n                            if (Array.from(topLevelmenuItems)[nextIndex] != undefined)\n                                Array.from(topLevelmenuItems)[nextIndex].focus();\n                            else\n                                Array.from(topLevelmenuItems)[0].focus();\n                        }\n                        else if (activeItem.closest('details')) {\n                            const subMenuItems = activeItem\n                                .closest('details')\n                                .querySelectorAll('a, button, :scope details > summary');\n                            subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;\n                            if (Array.from(subMenuItems)[subNextIndex] != undefined)\n                                Array.from(subMenuItems)[subNextIndex].focus();\n                            else\n                                Array.from(subMenuItems)[0].focus();\n                        }\n                        break;\n                }\n            }\n        });\n        this.addEventListener('toggle', (e) => {\n            var _a, _b, _c, _d;\n            const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });\n            this.dispatchEvent(updateEvent);\n            // Fix the focus\n            if (this.closest('.menu__wrapper')) {\n                menuItems[0].focus();\n            }\n            if (this.hasAttribute('popover-open')) {\n                e.preventDefault();\n                this.removeAttribute('popover-open');\n                this.hidePopover();\n            }\n            if (this.matches(':popover-open') && document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) {\n                (_a = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');\n                (_b = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _b === void 0 ? void 0 : _b.classList.add('active');\n            }\n            else {\n                (_c = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-pressed');\n                (_d = document.querySelector(`[popovertarget=\"${this.getAttribute('id')}\"]`)) === null || _d === void 0 ? void 0 : _d.classList.remove('active');\n            }\n        });\n        this.addEventListener('click', (event) => {\n            if (event &&\n                event.target instanceof HTMLElement &&\n                event.target.closest('button:has(+ iam-menu:not([popover]))')) {\n                const button = event.target.closest('button:has(+ iam-menu)');\n                button === null || button === void 0 ? void 0 : button.classList.toggle('open');\n            }\n            else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {\n                const button = event.target.closest('button.selectable');\n                if (this.hasAttribute('multiple')) {\n                    button.classList.toggle('selected');\n                }\n                else if (button === null || button === void 0 ? void 0 : button.classList.contains('selected')) {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                }\n                else {\n                    this.querySelectorAll('.selected').forEach((item) => {\n                        item.classList.remove('selected');\n                    });\n                    button.classList.add('selected');\n                }\n            }\n        });\n        // safari and firefox anchor fix for cards\n        if (!CSS.supports('top', 'anchor(top)')) {\n            document.addEventListener('click', (event) => {\n                if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {\n                    const button = event.originalTarget;\n                    const popoverID = button.getAttribute('popovertarget');\n                    const popover = document.getElementById(popoverID);\n                    const viewportOffset = button.getBoundingClientRect();\n                    const top = viewportOffset.top;\n                    const left = viewportOffset.left;\n                    popover.style.setProperty('top', top + 'px');\n                    popover.style.setProperty('left', left + button.clientWidth + 'px');\n                }\n            });\n        }\n    }\n}\nexport default iamMenu;\n"],"names":["iamMenu","template","menuID","menuButton","topLevelmenuItems","menuItems","subNextIndex","subPrevIndex","item","index","event","activeItem","prevIndex","nextIndex","subMenuItems","_a","_b","_c","_d","updateEvent","button","popoverID","popover","viewportOffset","top","left"],"mappings":"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"}

package/assets/js/components/milestone/milestone.component.js

@@ -0,0 +1,38 @@
+import { trackComponent, trackComponentRegistered } from '../_global.js';
+import milestone from '../../modules/milestone.js';
+trackComponentRegistered('iam-milestone');
+class iamMilestone extends HTMLElement {
+    constructor() {
+        var _a;
+        super();
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css')
+            ? document.body.getAttribute('data-core-css')
+            : `${assetLocation}/css/core.min.css`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    </style>
+      <div class="milestone-wrap" part="milestone-wrap">
+        <slot name="milestone-intro" class="milestone-intro" part="milestone-intro"></slot>
+        <slot>
+          <div class="task-wrap" part="milestone-task-wrap"></div>
+        </slot>
+      </div>
+    `;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        const milestoneComponent = this;
+        trackComponent(milestoneComponent, 'iam-milestone', [
+            'milestone-item-closed',
+            'milestone-item-opened',
+        ]);
+        milestone(this);
+    }
+}
+export default iamMilestone;

package/assets/js/components/milestone/milestone.component.min.js

@@ -0,0 +1,15 @@
+/*!
+  * iamKey v7.4.0
+  * Copyright 2022-2025 iamproperty
+  */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=`
+    <style>
+    @import "${e}";
+    </style>
+      <div class="milestone-wrap" part="milestone-wrap">
+        <slot name="milestone-intro" class="milestone-intro" part="milestone-intro"></slot>
+        <slot>
+          <div class="task-wrap" part="milestone-task-wrap"></div>
+        </slot>
+      </div>
+    `,(n=this.shadowRoot)===null||n===void 0||n.appendChild(s.content.cloneNode(!0))}connectedCallback(){m(this,"iam-milestone",["milestone-item-closed","milestone-item-opened"]),w(this)}}export{L as default};
+//# sourceMappingURL=milestone.component.min.js.map

package/assets/js/components/milestone/milestone.component.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone.component.min.js","sources":["../_global.js","../../modules/milestone.js","milestone.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 setStatus = function (milestoneElement) {\n    const status = milestoneElement.dataset.status;\n    if (!status) {\n        return;\n    }\n    const milestoneWrap = milestoneElement.shadowRoot.querySelector('.milestone-wrap');\n    const statusTag = document.createElement('span');\n    statusTag.setAttribute('part', 'status');\n    statusTag.classList.add('milestone-status');\n    statusTag.innerHTML = `${status} Step`;\n    if (status === 'Current') {\n        milestoneElement.classList.add('current');\n    }\n    milestoneWrap.insertAdjacentElement('afterbegin', statusTag);\n};\nexport const getMilestoneTasks = function (milestoneElement) {\n    const taskWrap = milestoneElement.shadowRoot.querySelector('.task-wrap');\n    const tasks = milestoneElement.dataset.items ? JSON.parse(milestoneElement.dataset.items) : [];\n    if (!tasks.length) {\n        return;\n    }\n    tasks.forEach(task => {\n        const taskItem = document.createElement('details');\n        const taskName = document.createElement('summary');\n        const detailsWrap = document.createElement('div');\n        const taskDescription = document.createElement('p');\n        detailsWrap.classList.add('task-details');\n        taskName.innerHTML = task.name;\n        if (task.date_completed) {\n            taskName.classList.add('complete');\n        }\n        taskItem.appendChild(taskName);\n        if (task.description) {\n            taskDescription.innerHTML = task.description;\n            detailsWrap.appendChild(taskDescription);\n        }\n        if (task.actions.length) {\n            detailsWrap.appendChild(getSubtasks(task.actions, taskName));\n        }\n        taskItem.appendChild(detailsWrap);\n        taskWrap.insertAdjacentElement('beforeend', taskItem);\n        // Fire tracking events\n        taskItem.addEventListener('click', () => {\n            if (taskItem === null || taskItem === void 0 ? void 0 : taskItem.hasAttribute('open')) {\n                itemInteractionEvent('milestone-item-closed', task.name, milestoneElement);\n            }\n            else {\n                itemInteractionEvent('milestone-item-opened', task.name, milestoneElement);\n            }\n        });\n    });\n    milestoneElement.appendChild(taskWrap);\n};\nconst itemInteractionEvent = function (eventName, taskName, element) {\n    const customEvent = new CustomEvent(eventName, {\n        detail: {\n            title: taskName,\n        },\n    });\n    element.dispatchEvent(customEvent);\n};\nconst getSubtasks = function (actions, taskName) {\n    const actionsWrap = document.createElement('ul');\n    const totalCount = actions.length;\n    const completed = actions.filter((action) => action.date_completed);\n    const completedCount = completed.length || 0;\n    if (totalCount < 1) {\n        return;\n    }\n    taskName.innerHTML += ` (${completedCount}/${totalCount})`;\n    actions.forEach(action => {\n        const actionItem = document.createElement('li');\n        const actionCompletedDate = document.createElement('span');\n        if (action.date_completed) {\n            actionItem.classList.add('complete');\n            actionCompletedDate.classList.add('action-date');\n            actionCompletedDate.innerHTML = action.date_completed;\n        }\n        actionItem.innerHTML = action.action;\n        actionItem.appendChild(actionCompletedDate);\n        actionsWrap.appendChild(actionItem);\n    });\n    return actionsWrap;\n};\nconst milestone = function (milestoneElement) {\n    setStatus(milestoneElement);\n    getMilestoneTasks(milestoneElement);\n};\nexport default milestone;\n","import { trackComponent, trackComponentRegistered } from '../_global.js';\nimport milestone from '../../modules/milestone.js';\ntrackComponentRegistered('iam-milestone');\nclass iamMilestone extends HTMLElement {\n    constructor() {\n        var _a;\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 coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    @import \"${coreCSS}\";\r\n    </style>\r\n      <div class=\"milestone-wrap\" part=\"milestone-wrap\">\r\n        <slot name=\"milestone-intro\" class=\"milestone-intro\" part=\"milestone-intro\"></slot>\r\n        <slot>\r\n          <div class=\"task-wrap\" part=\"milestone-task-wrap\"></div>\r\n        </slot>\r\n      </div>\r\n    `;\n        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const milestoneComponent = this;\n        trackComponent(milestoneComponent, 'iam-milestone', [\n            'milestone-item-closed',\n            'milestone-item-opened',\n        ]);\n        milestone(this);\n    }\n}\nexport default iamMilestone;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","setStatus","milestoneElement","status","milestoneWrap","statusTag","getMilestoneTasks","taskWrap","tasks","task","taskItem","taskName","detailsWrap","taskDescription","getSubtasks","itemInteractionEvent","element","customEvent","actions","actionsWrap","totalCount","completedCount","action","actionItem","actionCompletedDate","milestone","iamMilestone","_a","assetLocation","coreCSS","template"],"mappings":"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"}

package/assets/js/components/milestone-group/milestone-group.component.js

@@ -0,0 +1,35 @@
+import { trackComponent, trackComponentRegistered } from '../_global.js';
+import milestoneGroup from '../../modules/milestone-group.js';
+trackComponentRegistered('iam-milestone-group');
+class iamMilestoneGroup extends HTMLElement {
+    constructor() {
+        var _a;
+        super();
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css')
+            ? document.body.getAttribute('data-core-css')
+            : `${assetLocation}/css/core.min.css`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    </style>
+      <div class="milestone-group" part="milestone-group">
+        <slot>
+        </slot>
+      </div>
+    `;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        const milestoneGroupComponent = this;
+        trackComponent(milestoneGroupComponent, 'iam-milestone-group', [
+            'hide-future-items',
+            'show-future-items'
+        ]);
+        milestoneGroup(this);
+    }
+}
+export default iamMilestoneGroup;