@iamproperty/components 7.2.2--beta3 → 7.3.0

package/assets/sass/components/table-basic.global.scss

@@ -6,8 +6,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 // #region Basic table stuff
 
-
-
 :is(#{$selector}) {
   --hover-background: var(--colour-light);
   --row-bg: var(--colour-canvas-2);
@@ -207,11 +205,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 :is(#{$selector}).table--cta {
   @container (width > 23.4375em) {
-    padding-right: calc(var(--wrapper-padding) + 1.5rem)!important;
+    padding-right: calc(var(--wrapper-padding) + 1.5rem) !important;
 
     tr > th:nth-last-child(2),
     tr > td:nth-last-child(2) {
-      padding-right: var(--cta-width)!important;
+      padding-right: var(--cta-width) !important;
     }
 
     tr > *:not(:first-child):last-child {

package/assets/sass/components/table.global.scss

@@ -285,7 +285,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + th:not(.th--fixed),
     .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 6))!important;
+      padding-left: calc(rem(48 + 6)) !important;
     }
 
     .th--fixed + .th--fixed,
@@ -295,7 +295,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 6))!important;
+      padding-left: calc(rem(48 + 48 + 6)) !important;
     }
 
     .th--fixed + .th--fixed + .th--fixed,
@@ -305,7 +305,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 48 + 6))!important;
+      padding-left: calc(rem(48 + 48 + 48 + 6)) !important;
     }
 
     .dialog__wrapper {
@@ -348,7 +348,7 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
   }
 
   &:has(th[data-sort]) :is(th, td) {
-    padding-left: 0.25rem!important;
+    padding-left: 0.25rem !important;
   }
 
   th[data-sort][data-order-by='asc'] {

package/assets/sass/elements/buttons--global.scss

@@ -68,7 +68,7 @@ $darkMode: 'true' !default;
     border-radius: rem(24);
     margin-bottom: var(--btn-margin);
     background: none;
-    
+
     transition:
       border 0.5s,
       background 0.5s,

package/assets/sass/elements/dialog.scss

@@ -11,8 +11,7 @@ $darkMode: 'true' !default;
     display: block;
   }
 
-  // #region Default styling of both modals and popovers
-  [popover],
+  // #region Default styling of both modals
   dialog {
     --dialog-padding: #{rem(24)};
 
@@ -29,7 +28,6 @@ $darkMode: 'true' !default;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   }
 
-  [popover]:popover-open,
   dialog[open] {
     display: flex;
     flex-direction: column;

package/assets/sass/elements/forms.scss

@@ -762,8 +762,8 @@ $optionalText: 'true' !default;
         border: 2px solid var(--colour-check-border, var(--colour-primary));
         background: var(--colour-check-bg, transparent);
         border-radius: var(--border-radius);
-        height: rem(24);
-        width: rem(24);
+        height: var(--radio-size, #{rem(24)});
+        width: var(--radio-size, #{rem(24)});
         display: inline-block;
         position: absolute;
         top: rem(10 - 2);
@@ -783,10 +783,14 @@ $optionalText: 'true' !default;
         border-radius: var(--border-radius);
         height: rem(14);
         width: rem(14);
+
+        height: var(--radio-inner-size, #{rem(14)});
+        width: var(--radio-inner-size, #{rem(14)});
+
         display: none;
         position: absolute;
-        top: rem(15 - 2);
-        left: calc(#{rem(5)} + var(--outline-width));
+        top: var(--radio-inner-top, #{rem(15 - 2)});
+        left: var(--radio-inner-left, calc(#{rem(5)} + var(--outline-width)));
       }
 
       &.radio--tick {
@@ -854,19 +858,19 @@ $optionalText: 'true' !default;
       &:after {
         content: '\f00c';
         position: absolute;
-        font-size: 1em;
+        font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
         font-family: 'Font Awesome 6 Pro';
         font-weight: bold;
-        height: rem(24);
-        width: rem(24);
+        height: var(--checkbox-inner-size, #{rem(24)});
+        width: var(--checkbox-inner-size, #{rem(24)});
         line-height: rem(26);
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: rem(10 - 2);
-        left: var(--outline-width);
+        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
     }
@@ -881,19 +885,19 @@ $optionalText: 'true' !default;
       &:after {
         content: '\f068';
         position: absolute;
-        font-size: 1em;
+        font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
         font-family: 'Font Awesome 6 Pro';
         font-weight: bold;
-        height: rem(24);
-        width: rem(24);
+        height: var(--checkbox-inner-size, #{rem(24)});
+        width: var(--checkbox-inner-size, #{rem(24)});
         line-height: rem(26);
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: rem(10 - 2);
-        left: var(--outline-width);
+        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
     }

package/assets/sass/foundations/reboot.scss

@@ -126,18 +126,18 @@ $darkMode: 'true' !default;
   }
 
   // #region scrollbars
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar {
     width: 10px;
     height: 10px;
   }
 
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-track {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-track {
     background-color: #f1f1f1;
     border-top: 4px solid var(--colour-canvas-2);
     border-left: 4px solid var(--colour-canvas-2);
   }
 
-  :is(div, form, fieldset, textarea, details)::-webkit-scrollbar-thumb {
+  :is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-thumb {
     background-color: #c1c1c1;
     width: 6px;
     border-top: 4px solid var(--colour-canvas-2);

package/assets/ts/components/menu/menu.component.ts

@@ -24,7 +24,6 @@ class iamMenu extends HTMLElement {
     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');
     const subMenus = this.querySelectorAll('details');
@@ -34,188 +33,170 @@ class iamMenu extends HTMLElement {
 
     // Set the needed CSS styles to connect the ID attribute to the anchor name
     if (menuID && menuButton) {
-      menuInner?.setAttribute('role', 'menu');
+      this.setAttribute('role', 'menu');
       this.style['position-anchor'] = `--${menuID}`;
 
       menuButton?.setAttribute('aria-haspopup', 'true');
       menuButton?.style['anchor-name'] = `--${menuID}`;
       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) => {
+      const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });
+      this.dispatchEvent(updateEvent);
+
+      if (this.hasAttribute('popover-open')) {
+        e.preventDefault();
+        this.removeAttribute('popover-open');
+        this.hidePopover();
+      }
+
+      if(this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)){
+
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.setAttribute('aria-pressed','true');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.add('active');
+      }
+      else {
+
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.removeAttribute('aria-pressed');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.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?.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?.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>`
-      );
   }
 }
 

package/assets/ts/components/rank/rank.component.ts

@@ -247,17 +247,12 @@ class iamRank extends HTMLElement {
   }
 
   connectedCallback(): void {
-
-
     const position = this.hasAttribute('data-position') ? this.getAttribute('data-position') : this.textContent?.trim();
-    
-    this.setAttribute('data-position', position);
 
+    this.setAttribute('data-position', position);
 
-    
     trackComponent(this, 'iam-rank', ['select-card']);
   }
-
 }
 
 export default iamRank;

package/assets/ts/components/rankings/rankings.component.ts

@@ -33,8 +33,6 @@ class iamRankings extends HTMLElement {
   }
 
   connectedCallback(): void {
-
-
     const firstText = this.shadowRoot?.querySelector('.first-position');
     const secondText = this.shadowRoot?.querySelector('.second-position');
     const thirdText = this.shadowRoot?.querySelector('.third-position');
@@ -44,19 +42,15 @@ class iamRankings extends HTMLElement {
     secondText?.innerHTML = this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent;
     thirdText?.innerHTML = this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent;
 
-
-    
     this.querySelectorAll('tbody tr').forEach((element) => {
-
       const value = element.querySelector('td:last-child')?.textContent?.trim();
 
-      if(!element.querySelector(':first-child progress'))
+      if (!element.querySelector(':first-child progress'))
         element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
     });
 
     trackComponent(this, 'iam-rank', ['select-card']);
   }
-
 }
 
 export default iamRankings;