@iamproperty/components 5.4.2-beta2 → 5.4.2-beta4

package/assets/sass/_elements.scss

@@ -16,3 +16,4 @@
 @import "elements/forms.scss";
 
 @import "elements/badge.scss";
+@import "elements/details.scss";

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

@@ -145,6 +145,16 @@ iam-actionbar {
 
   background: none;
   border: none;
+  text-indent: 0;
+  width: 100%;
+  display: block;
+  max-width: 100%;
+  text-align: left;
+  padding: 0;
+
+  &:before {
+    position: static;
+  }
 }
 button[slot="overflow"],
 button[slot="selected-overflow"] {

package/assets/sass/components/actionbar.scss

@@ -1,5 +1,9 @@
 @use "../_func.scss" as *;
 
+:host {
+  background-color: #FCFCFC;
+}
+
 .actionbar__wrapper {
   position: relative;
   z-index: 10;

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

@@ -16,6 +16,7 @@ iam-table {
   }
   tbody tr {
     background: var(--row-bg);
+    height: 3.5rem;
 
     &:is(:hover,:focus-within,.hover) {
 
@@ -65,6 +66,7 @@ iam-table {
       padding: var(--wrapper-padding);
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
       border-radius: rem(8);
+      height: auto;
 
       & + tr {
         margin-top: rem(32);
@@ -160,7 +162,7 @@ iam-table {
       }
     }
 
-    .dialog__wrapper {
+    .dialog__wrapper:not([slot="overflow"]) {
       margin-top: -0.5rem;
       margin-left: -1rem;
       z-index: 10;
@@ -216,6 +218,7 @@ iam-table {
       text-align: right;
       background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
       cursor: default;
+      padding-bottom: 0;
 
       @media screen and (prefers-color-scheme: dark) {
         
@@ -224,6 +227,7 @@ iam-table {
       a {
         white-space: nowrap;
         padding-right: 0.2rem;
+        padding-bottom: 0;
       }
     }
 
@@ -357,7 +361,7 @@ table {
     color: var(--colour-muted);
   }
 
-  :is([data-content="requires approval"],[data-content="approval required"],[data-content="upcoming"]):after {
+  :is([data-content="requires approval"],[data-content="approval required"],[data-content="action required"],[data-content="upcoming"]):after {
 
     content: "\f024";
     color: var(--colour-warning);
@@ -369,7 +373,7 @@ table {
     color: var(--colour-warning);
   }
 
-  :is([data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
+  :is([data-content="manually verified"],[data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
     
     content: "\f00c";
     font-weight: normal;
@@ -586,7 +590,7 @@ iam-table.table--fullwidth:not([data-expandable]) {
     }
 
     tr {
-      
+
       &:is(:hover,:focus) .td--fixed{
         background: linear-gradient(90deg, var(--row-bg) calc(100% - 1.5rem), transparent 100%);
       }
@@ -597,6 +601,7 @@ iam-table.table--fullwidth:not([data-expandable]) {
     }
 
 
+    .th--fixed + th:not(.th--fixed),
     .td--fixed + td:not(.td--fixed){
 
       padding-left: calc(rem(48 + 24) + var(--width-adjust));

package/assets/sass/elements/details.scss

@@ -0,0 +1,118 @@
+details:not(.details--revert) {
+
+  --inline-padding: #{rem(2)};
+  --border-radius: #{rem(8)} #{rem(8)} 0 0;
+  --icon-top: #{rem(14)};
+  --line-height: #{rem(24)};
+
+  *:not(iam-tabs) > &:not([open]){
+    
+    padding-bottom: rem(42);
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    --inline-padding: #{rem(30)};
+    --icon-top: #{rem(24)};
+    --line-height: #{rem(24)};
+  }
+
+  summary {
+
+    border-bottom: 1px solid var(--colour-border);
+    padding-left: var(--inline-padding);
+    padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
+    padding-block: rem(14)!important;
+    position: relative;
+    color: $headings-color;
+
+    &:is(:hover,:focus-visible) {
+      background: var(--colour-light);
+      border-radius: var(--border-radius);
+    }
+
+
+    h3,.h3 {
+      all: unset!important;
+    }
+
+    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6){
+      max-width: 100%;
+      padding: 0;
+      margin: 0;
+
+      &:after {
+        content: "\f055";
+        position: absolute;
+        font-size: rem(24);
+        top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
+        right: var(--inline-padding);
+        width: rem(24);
+        height: rem(24);
+        line-height: rem(24);
+        font-weight: 300;
+        font-family: "Font Awesome 6 Pro";
+      }
+    }
+  }
+
+  &[open] summary {
+    margin-bottom: 2rem;
+  }
+
+  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6) {
+
+    &:after {
+      content: "\f056";
+      font-weight: 900;
+    }
+  }
+
+  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6)) { // h3 purposelessly missed out
+
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    color: $headings-color;
+    clear: both;
+    display: block;
+      
+    [class*="fa-"] {
+      margin-right: 0.5rem;
+    }
+
+    font-size: rem(18);
+    line-height: var(--line-height);
+    padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+    font-weight: 700;
+    max-width: 100%;
+
+    &:after {
+      content: "\f055";
+      position: absolute;
+      font-size: rem(24);
+      top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
+      right: var(--inline-padding);
+      width: rem(24);
+      height: rem(24);
+      line-height: rem(24);
+      font-weight: 300;
+      font-family: "Font Awesome 6 Pro";
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
+      --line-height: #{rem(map-get($heading-sizes,"h3_lh_sm"))};
+      padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
+      font-weight: 900;
+    }
+  }
+
+  &[open] summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6)) {
+
+    &:after {
+      content: "\f056";
+      font-weight: 900;
+    }
+  }
+}

package/assets/sass/elements/dialog.scss

@@ -529,7 +529,7 @@ dialog::backdrop {
 
     margin-bottom: 0.25rem;
 
-    &:not(.btn-compact):after {
+    &:not(.btn-compact):not([class*="fa-"]):after {
       content: "";
     
       display: inline-block;

package/assets/sass/elements/table.element.scss

@@ -46,7 +46,7 @@ th {
 
 thead {
   tr {
-
+    
     border-bottom: var(--border-width) solid currentColor;
     @include var(border-color,--colour-primary);
   }

package/assets/sass/elements/type.scss

@@ -11,13 +11,14 @@ mark {
 
 // #region headings
 %heading {
+  --line-height: #{$headings-line-height};
   // From bootstrap reboot
   margin-top: 0; // 1
   margin-bottom: $headings-margin-bottom;
   font-family: $headings-font-family;
   font-style: $headings-font-style;
   font-weight: bold;
-  line-height: $headings-line-height;
+  line-height: var(--line-height);
   color: $headings-color;
   // END:Bootstap reboot
   clear: both;
@@ -35,36 +36,37 @@ mark {
 }
 
 :is(.h1, h1) {
+  --line-height: #{rem(map-get($heading-sizes,"h1_lh"))};
+
   font-size: rem(map-get($heading-sizes,"h1_fs"));
-  line-height: rem(map-get($heading-sizes,"h1_lh"));
   padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
   font-weight: 900;
 
   @include media-breakpoint-up(sm) {
 
     font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
-    line-height: rem(map-get($heading-sizes,"h1_lh_sm"));
+    --line-height: #{rem(map-get($heading-sizes,"h1_lh_sm"))};
     padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
   }
 }
 
 :is(h2, .h2) {
   font-size: rem(map-get($heading-sizes,"h2_fs"));
-  line-height: rem(map-get($heading-sizes,"h2_lh"));
+  --line-height: #{rem(map-get($heading-sizes,"h2_lh"))};
   padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
   font-weight: 900;
 
   @include media-breakpoint-up(sm) {
 
     font-size: rem(map-get($heading-sizes,"h2_fs_sm"));
-    line-height: rem(map-get($heading-sizes,"h2_lh_sm"));
+    --line-height: #{rem(map-get($heading-sizes,"h2_lh_sm"))};
     padding-bottom: rem(map-get($heading-sizes,"h2_pb_sm"));
   }
 }
 
 :is(h3, .h3) {
   font-size: rem(map-get($heading-sizes,"h3_fs"));
-  line-height: rem(map-get($heading-sizes,"h3_lh"));
+  --line-height: #{rem(map-get($heading-sizes,"h3_lh"))};
   padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
   max-width: var(--content-max-width);
   font-weight: 900;
@@ -72,14 +74,14 @@ mark {
   @include media-breakpoint-up(sm) {
 
     font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
-    line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
+    --line-height: #{rem(map-get($heading-sizes,"h3_lh_sm"))};
     padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
   }
 }
 
 :is(.h4, h4, .h5, h5, .h6, h6)  {
   font-size: rem(map-get($heading-sizes,"h4_fs"));
-  line-height: rem(map-get($heading-sizes,"h4_lh"));
+  --line-height: #{rem(map-get($heading-sizes,"h4_lh"))};
   padding-bottom: rem(map-get($heading-sizes,"h4_pb"));
   max-width: var(--content-max-width);
 

package/assets/ts/bundle.ts

@@ -5,7 +5,6 @@ import extendDialogs from '../js/modules/dialogs'
 import createDataLayer from '../js/modules/data-layer'
 import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
-//import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'

package/assets/ts/components/accordion/README.md

@@ -29,4 +29,3 @@ import('../node_modules/@iamproperty/components/assets/js/components/accordion/a
 ### Class modifiers
 
 - Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
-- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.

package/assets/ts/components/accordion/accordion.component.ts

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import accordion from "../../modules/accordion";
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
@@ -16,30 +15,45 @@ class iamAccordion 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/accordion.css";`;
-    const loadExtraCSS = `@import "${assetLocation}/css/components/accordion.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
-    ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+
+    :host {
+      margin-bottom: 2.5rem;
+      display: block;
+    }
+    
+    ::slotted(details) {
+      --border-radius: 0!important;
+      padding-bottom: 0!important;
+    }    
     </style>
-    <div class="accordion">
       <slot></slot>
-    </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    // insert extra CSS
-    if(!document.getElementById('accordionGlobal'))
-      document.head.insertAdjacentHTML('beforeend',`<style id="accordionGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {
 
-    accordion(this);
+    if(!this.classList.contains('accordion--keep-open')){
+
+      const details: NodeListOf<HTMLElement> = this.querySelectorAll(":scope > details");
+
+      // Add the toggle listeners.
+      details.forEach((targetDetail) => {
+        targetDetail.addEventListener("toggle", () => {
+          // Close all the details that are not targetDetail.
+          details.forEach((detail) => {
+            if (detail !== targetDetail && targetDetail.hasAttribute('open')) {
+              detail.removeAttribute("open");
+            }
+          });
+        });
+      });
+    }
   }
 }
 

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

@@ -276,7 +276,7 @@ class iamActionbar extends HTMLElement {
         modifier = screenWidth/375;
       }
 
-      // Work out the safe sapce width depending upon the wrappers width and modifier 
+      // Work out the safe sapce width depending upon the wrappers width and modifier comp
       if (wrapperWidth >= 992 && wrapperWidth <= 1280){
         safeAreaWidth = safeAreaWidth*modifier;
       }
@@ -293,7 +293,7 @@ class iamActionbar extends HTMLElement {
       // If the wrapper width is small we want to reduce the btn sizes by adding or removing btn-compact classes
       if (wrapperWidth < 576) {
         
-        Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated)')).forEach((element,index) => {
+        Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated), :scope > .dialog__wrapper > .btn[class*="fa-"]:first-child:not(.js-updated)')).forEach((element,index) => {
 
           element.className = element.className.replace(' btn-compact',' _btn-compact');
           element.classList.add('btn-compact');
@@ -302,7 +302,7 @@ class iamActionbar extends HTMLElement {
       }
       else {
 
-        Array.from(that.querySelectorAll(':scope > .btn.js-updated')).forEach((element,index) => {
+        Array.from(that.querySelectorAll(':scope > .btn.js-updated, :scope > .dialog__wrapper > .btn.js-updated:first-child')).forEach((element,index) => {
           
           element.classList.remove('btn-compact');
           element.classList.remove('js-updated');

package/assets/ts/components/nav/nav.component.ts

@@ -166,6 +166,12 @@ class iamNav extends HTMLElement {
       }
     });
     
+
+    this.querySelectorAll('details').forEach(function(element){
+      
+      element.classList.add('details--revert');
+    });
+
     // Has secondary link
     if(this.querySelector('a[slot="secondary"]')){
       menu.classList.add('has-secondary');

package/assets/ts/dynamic.ts

@@ -6,7 +6,6 @@ import createDataLayer from '../js/modules/data-layer'
 import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import table from '../js/modules/table'
-//import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'

package/assets/ts/flat-components.ts

@@ -6,7 +6,6 @@ import createDataLayer from '../js/modules/data-layer'
 import extendInputs from '../js/modules/inputs';
 import nav from '../js/modules/nav'
 import * as tableModule from './modules/table'
-import accordion from './modules/accordion'
 import testimonial from '../js/modules/testimonial'
 import carousel from '../js/modules/carousel'
 import form from '../js/modules/form'
@@ -48,11 +47,6 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   });
 
-  // Accordions
-  Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement) => {
-    accordion(arrayElement);
-  });
-
   // Testimonial
   Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
     testimonial(arrayElement);

package/assets/ts/modules/helpers.ts

@@ -31,6 +31,7 @@ export const addGlobalEvents = (body) => {
     const label = document.querySelector(`label[for="${hash.replace('#','')}"]`);
     const summary = document.querySelector(hash+' summary');
     const dialog = document.querySelector(`dialog${hash}`);
+    const detail = document.querySelector(`detail${hash}`);
 
     if(label instanceof HTMLElement)
       label.click();
@@ -38,6 +39,8 @@ export const addGlobalEvents = (body) => {
       summary.click();
     else if(dialog instanceof HTMLElement)
       dialog.showModal();
+    else if(detail instanceof HTMLElement)
+      detail.addAttribute('open');
   }
 
   if(location.hash)