@iamproperty/components 7.2.1--beta3 → 7.2.1

package/assets/sass/components/bento-grid.component.scss

@@ -11,58 +11,73 @@
   display: block;
 }
 
+.wrapper {
+  margin-bottom: 2rem;
+}
+
 ::slotted(details) {
   margin-bottom: 1rem;
   border-radius: 1rem;
   padding: 0 !important;
   position: relative;
   overflow: hidden;
+
+  display: block;
+  width: 100%;
+  min-height: rem(200);
 }
 
-@container (width > 40em) {
+@container (width > 54em) {
   .wrapper {
-    aspect-ratio: 1.75 / 1;
+    aspect-ratio: 1.81 / 1;
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: 1rem;
-
     --content-max-width: 28rem;
+    --height: 50%;
+    margin-bottom: 3rem;
   }
 
   ::slotted(details) {
     position: absolute;
     top: 0;
     left: 0;
-    width: calc(60% - 0.5rem) !important;
-    height: calc(50% - 0.5rem);
+    width: calc(58.5% - 0.5rem) !important;
+    height: calc(var(--height) - 0.5rem);
     z-index: 1;
     border-radius: 1rem;
     margin: 0;
+    aspect-ratio: unset;
+
+    will-change: transform;
   }
 
   ::slotted(details.animating) {
-    transition: 1s !important;
     z-index: 10 !important;
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition: 0.8s !important;
+    }
   }
 
   ::slotted(details:nth-child(2)) {
     top: 0;
-    left: calc(60% + 0.5rem);
-    width: calc(40% - 0.5rem) !important;
-    height: calc(50% - 0.5rem);
+    left: calc(58.5% + 0.5rem);
+    width: calc(41.5% - 0.5rem) !important;
+    height: calc(var(--height) - 0.5rem);
   }
   ::slotted(details:nth-child(3)) {
-    top: calc(50% + 0.5rem);
+    top: calc(var(--height) + 0.5rem);
     left: 0;
     width: calc(50% - 0.5rem) !important;
-    height: calc(50% - 0.5rem);
+    height: calc(var(--height) - 0.5rem);
   }
   ::slotted(details:nth-child(4)) {
-    top: calc(50% + 0.5rem);
+    top: calc(var(--height) + 0.5rem);
     left: calc(50% + 0.5rem);
     width: calc(50% - 0.5rem) !important;
-    height: calc(50% - 0.5rem);
+    height: calc(var(--height) - 0.5rem);
   }
 
   ::slotted(details[open]) {
@@ -80,7 +95,6 @@
     left: 50%;
     height: 100%;
     width: 100%;
-    background: red;
   }
 
   ::slotted(details[open]:not(.animating)) {
@@ -88,4 +102,8 @@
     overflow-x: clip;
     overscroll-behavior: contain;
   }
+
+  :host(:has(details)) .wrapper {
+    aspect-ratio: 3 / 1;
+  }
 }

package/assets/sass/components/bento-grid.global.scss

@@ -0,0 +1,249 @@
+@use '../_func.scss' as *;
+
+iam-bento-grid {
+  details {
+    summary {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      max-width: 100%;
+      padding: 1.5rem;
+      margin-bottom: 0;
+
+      [role='presentation'] {
+        display: block;
+        font-family: var(--font-body);
+        font-weight: normal;
+        font-size: 1rem;
+        position: relative;
+        width: fit-content;
+        transition: opacity 0.8s;
+        will-change: opacity;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+          transition: opacity 0.8s;
+        }
+
+        &:before {
+          display: block;
+          content: ' ';
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          width: 100%;
+          height: 0;
+          border: 1px solid currentColor;
+          transform: translate(-50%, 0);
+          will-change: transform;
+
+          @media screen and (prefers-reduced-motion: no-preference) {
+            transition: 0.8s;
+          }
+        }
+
+        &:after {
+          display: inline-block;
+          content: '\f061';
+          top: 100%;
+          margin-left: 0.5em;
+          line-height: 1em;
+          font-size: 1em;
+          font-family: 'Font Awesome 6 Pro';
+        }
+      }
+
+      &::after {
+        opacity: 0;
+        content: '\e092';
+        pointer-events: all;
+        left: auto;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        line-height: 1em;
+        font-size: 0.5em;
+
+        font-family: 'Font Awesome 6 Pro';
+        font-weight: 300;
+      }
+
+      &:hover {
+        [role='presentation'] {
+          display: block;
+          font-family: var(--font-body);
+          font-weight: normal;
+          font-size: 1rem;
+          position: relative;
+          width: fit-content;
+
+          &:before {
+            width: 80%;
+          }
+        }
+      }
+    }
+
+    &[style]:before {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 60%;
+      left: 70%;
+      height: 50%;
+      aspect-ratio: 2 / 1;
+
+      background-image: var(--bg);
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: 0.5rem;
+
+      -webkit-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.5);
+      -moz-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.5);
+      box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.5);
+
+      will-change: top, left, height;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        transition: 0.8s;
+      }
+    }
+
+    &[open]:before {
+      top: 100%;
+      left: 100%;
+    }
+
+    &::details-content {
+      opacity: 0;
+      padding: 0 1.5rem 1.5rem 1.5rem;
+      overflow: auto;
+      will-change: top, left, height;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        transition: 0.8s;
+      }
+    }
+  }
+
+  details {
+    summary:hover {
+      [role='presentation'] {
+        opacity: 1;
+      }
+    }
+  }
+
+  details[open] {
+    position: relative;
+
+    &:not(.animating)::details-content {
+      opacity: 1;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    summary {
+      pointer-events: none;
+      width: 100%;
+      max-width: 100%;
+      height: fit-content;
+
+      [role='presentation'] {
+        opacity: 0;
+      }
+
+      [role='presentation'] {
+        margin-bottom: -2rem;
+      }
+
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@supports selector(::details-content) {
+  .notice {
+    display: none;
+  }
+}
+
+iam-bento-grid {
+  @container (width > 40em) {
+    details {
+      summary {
+        padding-right: 30%;
+      }
+
+      &[style]:before {
+        top: 40%;
+        left: 60%;
+        height: 75%;
+      }
+
+      &[style]:hover:before {
+        top: 35%;
+        left: 57%;
+        height: 75%;
+      }
+
+      &[open][style]:before {
+        top: 100%;
+        left: 100%;
+      }
+    }
+  }
+}
+
+iam-bento-grid {
+  @container (width > 54em) {
+    details {
+
+      overflow: hidden;
+
+      summary {
+        padding-right: 30%;
+
+        [role='presentation'] {
+          opacity: 0;
+        }
+
+        :is(:hover, :focus) [role='presentation'] {
+          opacity: 1;
+        }
+
+        &::after {
+          top: 1.5rem;
+          right: 1.5rem;
+          line-height: 1em;
+          font-size: 0.75em;
+        }
+      }
+
+      &[style]:before {
+        top: 38%;
+        left: 45%;
+        height: 80%;
+      }
+
+      &[style]:hover:before {
+        top: 35%;
+        left: 38%;
+        height: 80%;
+      }
+
+      &[open][style]:before {
+        left: calc(50% + 0.5rem) !important;
+        top: 30% !important;
+        height: 80% !important;
+      }
+    }
+
+    details:nth-child(4) ~ details {
+      display: none;
+    }
+  }
+}

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

@@ -30,7 +30,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     min-width: 10rem;
   }
 
-
   tbody tr {
     background: var(--row-bg);
 

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

@@ -22,7 +22,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 :is(#{$selector}) iam-actionbar {
   margin: 0 1.5rem 1rem 1.5rem;
-  
+
   @container (width < 23.4375em) {
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
@@ -280,7 +280,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed:has(+ th:not(.th--fixed)),
     .td--fixed:has(+ td:not(.td--fixed)) {
-
       background: linear-gradient(90deg, var(--row-bg) calc(100% - 1rem), transparent 100%);
     }
 
@@ -299,7 +298,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
       padding-left: calc(rem(48 + 48 + 6))!important;
     }
 
-
     .th--fixed + .th--fixed + .th--fixed,
     .td--fixed + .td--fixed + .td--fixed {
       left: rem(48 + 48);
@@ -309,7 +307,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     .td--fixed + .td--fixed + .td--fixed + td:not(.td--fixed) {
       padding-left: calc(rem(48 + 48 + 48 + 6))!important;
     }
-    
+
     .dialog__wrapper {
       z-index: 10;
     }
@@ -393,18 +391,15 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
 
 // #region max height tables
 
-
-iam-table-basic:is(.mh-lg,.mh-md,.mh-sm) {
-
+iam-table-basic:is(.mh-lg, .mh-md, .mh-sm) {
   thead {
     position: sticky;
     top: 0;
     z-index: 9999;
 
     tr {
-        
       background: var(--row-bg);
-      background: linear-gradient(0deg,var(--colour-primary) 2px, var(--row-bg) 2px);
+      background: linear-gradient(0deg, var(--colour-primary) 2px, var(--row-bg) 2px);
       border: none;
     }
   }

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

@@ -70,6 +70,7 @@ $darkMode: 'true' !default;
     background: none;
     
     transition:
+      border 0.5s,
       background 0.5s,
       color 0.5s;
     height: auto;

package/assets/sass/elements/lists.scss

@@ -53,6 +53,10 @@ $darkMode: 'true' !default;
     max-width: $content-max-width;
   }
 
+  .tick-list--white {
+    --tick-colour: white;
+  }
+
   .tick-list {
     padding-left: 0;
 
@@ -72,7 +76,7 @@ $darkMode: 'true' !default;
         font-size: 1.25em;
         line-height: 1;
 
-        color: var(--colour-complete);
+        color: var(--tick-colour, var(--colour-complete));
         font-family: 'Font Awesome 6 Pro';
         font-size: 400;
       }

package/assets/sass/elements/popover.scss

@@ -14,7 +14,10 @@ $darkMode: 'true' !default;
 
     &:has(dialog[open], dialog:popover-open) > button {
       background: var(--colour-btn-secondary-bg-hover);
-      color: var(--colour-btn-secondary-hover);
+
+      &:not(.btn-action) {
+        color: var(--colour-btn-secondary-hover);
+      }
       filter: brightness(85%);
       transition:
         background 0.1s,

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -40,16 +40,13 @@ class iamActionbar extends HTMLElement {
     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 loadCSS = `@import "${assetLocation}/css/components/actionbar.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
@@ -62,7 +59,7 @@ class iamActionbar extends HTMLElement {
           <slot></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
               <dialog class="dialog--list" part="overflow">
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
@@ -89,7 +86,7 @@ class iamActionbar extends HTMLElement {
           <slot name="selected"></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
-              <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
+              <button class="btn btn-secondary btn-compact btn-sm fa-ellipsis-vertical m-0">More actions</button>
               <dialog class="dialog--list" part="selected-overflow">
                 <slot name="selected-overflow"></slot>
               </dialog>
@@ -109,6 +106,9 @@ class iamActionbar extends HTMLElement {
 
       </div>
     </div>
+    <div class="no-columns">
+      <span class="d-block">No columns selected</span>
+    </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -186,7 +186,7 @@ class iamActionbar extends HTMLElement {
         if (view == 'list') icon = 'fa-grip-lines';
         else if (view == 'small') icon = 'fa-bars';
 
-        btns += `<button class="btn btn-action btn-compact mb-0 fa-regular ${icon}">${view}</button>`;
+        btns += `<button class="btn btn-action btn-compact btn-sm mb-0 fa-regular ${icon}">${view}</button>`;
       });
 
       actionbarWrapper?.insertAdjacentHTML('afterbegin', `<div class="views m-0">${btns}</div>`);
@@ -410,6 +410,8 @@ class iamActionbar extends HTMLElement {
         columnsHidden += this.hasAttribute(`data-hide-col${index + 1}`) ? `${index + 1},` : '';
       });
 
+      this.setAttribute('data-columns-shown', checklistHolder.querySelectorAll('input:checked').length);
+
       const dispatchedEvent = new CustomEvent('columm-filters-set', {
         detail: {
           columnsHidden: columnsHidden.slice(0, -1),
@@ -432,6 +434,8 @@ class iamActionbar extends HTMLElement {
       });
     }
 
+    this.setAttribute('data-columns-shown', checklistHolder.querySelectorAll('input:checked').length);
+
     if (this.hasAttribute('data-filter-columns') && !this.hasAttribute('data-filter-columns-save')) {
       checklistHolder?.addEventListener('change', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('input')) {

package/assets/ts/components/bento-grid/bento-grid.component.ts

@@ -7,10 +7,10 @@ declare global {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
   event: 'customElementRegistered',
-  element: 'accordion',
+  element: 'bento-grid',
 });
 
-class iamAccordion extends HTMLElement {
+class iamBentoGrid extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -19,6 +19,7 @@ class iamAccordion extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/bento-grid.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/bento-grid.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -32,6 +33,9 @@ class iamAccordion extends HTMLElement {
     </div>
     `;
     this.shadowRoot?.appendChild(template.content.cloneNode(true));
+
+    if (!document.getElementById('bentogridGlobal'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="bentogridGlobal">${loadExtraCSS}</style>`);
   }
 
   connectedCallback(): void {
@@ -59,9 +63,25 @@ class iamAccordion extends HTMLElement {
         setTimeout(() => {
           details?.classList.remove('animating');
         }, 1100);
+
+        if (details?.hasAttribute('open')) {
+          const customEvent = new CustomEvent('item-closed', {
+            detail: {
+              title: summary?.textContent,
+            },
+          });
+          this.dispatchEvent(customEvent);
+        } else {
+          const customEvent = new CustomEvent('item-opened', {
+            detail: {
+              title: summary?.textContent,
+            },
+          });
+          this.dispatchEvent(customEvent);
+        }
       }
     });
   }
 }
 
-export default iamAccordion;
+export default iamBentoGrid;

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

@@ -34,24 +34,24 @@ class iamRankings extends HTMLElement {
 
   connectedCallback(): void {
 
-    const position = this.hasAttribute('data-position') ? this.getAttribute('data-position') : this.textContent?.trim();
-    
-    this.setAttribute('data-position', position);
 
     const firstText = this.shadowRoot?.querySelector('.first-position');
     const secondText = this.shadowRoot?.querySelector('.second-position');
     const thirdText = this.shadowRoot?.querySelector('.third-position');
+    const max = this.hasAttribute('data-max') ? this.getAttribute('data-max') : 100;
 
     firstText?.innerHTML = this.querySelector('tbody tr:nth-child(1) :is(td,th):nth-child(1)')?.textContent;
     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'))
-        element.querySelector(':first-child')?.innerHTML += `<progress max="11" value="${value}"></progress>`;
+        element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
     });
 
     trackComponent(this, 'iam-rank', ['select-card']);

package/assets/ts/modules/table.ts

@@ -265,12 +265,13 @@ export const createMobileButton = (component, table): void => {
 
   if (table.querySelectorAll('thead tr th').length < 4 && !component.hasAttribute('data-expandable')) return false;
 
-
-
   //If the expand column already exists we don't need to add a new one.
   Array.from(table.querySelectorAll('thead tr')).forEach((row) => {
     if (!table.querySelectorAll('thead tr th.expand-button-heading').length) {
-      row.insertAdjacentHTML('afterbegin', `<th class="${component.hasAttribute('data-expandable') ? 'th--fixed ' : '' }expand-button-heading"></th>`);
+      row.insertAdjacentHTML(
+        'afterbegin',
+        `<th class="${component.hasAttribute('data-expandable') ? 'th--fixed ' : ''}expand-button-heading"></th>`
+      );
     }
   });
 
@@ -278,11 +279,10 @@ export const createMobileButton = (component, table): void => {
     const preExpanded = row.getAttribute('data-view') === 'full' ? 'aria-expanded' : '';
     row.insertAdjacentHTML(
       'afterbegin',
-      `<td class="${component.hasAttribute('data-expandable') ? 'td--fixed ' : '' }td--expand"><button class="btn btn-compact btn-secondary btn-sm" data-expand-button ${preExpanded} data-index="${index}">Expand</button></td>`
+      `<td class="${component.hasAttribute('data-expandable') ? 'td--fixed ' : ''}td--expand"><button class="btn btn-compact btn-secondary btn-sm" data-expand-button ${preExpanded} data-index="${index}">Expand</button></td>`
     );
   });
 
-  
   table.addEventListener('click', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-expand-button]')) {
       const button = event.target.closest('[data-expand-button]');
@@ -349,19 +349,13 @@ export const setupAdvancedTable = (component, table): void => {
 
     const tr = btn.closest('tr');
     const td = btn.closest('td');
-    
-
 
-    const trChildren = Array.prototype.slice.call( tr.children );
-    const cellIndex = trChildren.indexOf( td );
+    const trChildren = Array.prototype.slice.call(tr.children);
+    const cellIndex = trChildren.indexOf(td);
 
     td.classList.add('td--fixed');
-    table.querySelector(`thead tr th:nth-child(${cellIndex+1})`).classList.add('th--fixed');
-
+    table.querySelector(`thead tr th:nth-child(${cellIndex + 1})`).classList.add('th--fixed');
   });
-
-
-
 };
 // #region Advanced table functions
 export const addSelectboxes = (component, table, actionbar): void => {

package/assets/ts/scripts.ts

@@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   extendDialogs(document.body);
   extendInputs(document.body);
-/*
+  /*
   const prefix = 'iam';
   const options = {
     rootMargin: '50px',