@iamproperty/components 3.9.0-beta-1 → 4.0.1

package/assets/sass/components/table.scss

@@ -76,7 +76,7 @@ tr td[colspan="100%"]:first-child:last-child span {
 @container (width >= 60em) {
   thead {
 
-    th {
+    th:not(:empty) {
       white-space: nowrap;
       min-width: #{$td-mw};
     }
@@ -136,12 +136,17 @@ table.border-0 {
     margin-bottom: 0;
 
     td:has(input[type="checkbox"]) {
-      width: rem(30);
-      min-width: rem(30);
-      max-width: rem(30);
+      width: rem(40);
+      min-width: rem(40);
+      max-width: rem(40);
     }
   }
 
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background: var(--colour-canvas-2);
+  }
+
   @media (forced-colors: active) {
     --wrapper-padding: 0;
     background: var(--colour-canvas-2);
@@ -170,6 +175,11 @@ table.border-0 {
     margin-right: -1.5rem;
     margin-bottom: 0;
     background: white;
+
+    @media screen and (prefers-color-scheme: dark) {
+      
+      background: var(--colour-canvas-2);
+    }
   }
   
 
@@ -381,7 +391,13 @@ table.border-0 {
       margin-left: rem(-40);
       min-height: var(--row-height);
       text-align: right;
+      background: linear-gradient(90deg, transparent 0%, white 1.25rem);
+      cursor: default;
+
+      @media screen and (prefers-color-scheme: dark) {
+        
       background: linear-gradient(90deg, transparent 0%, var(--colour-canvas-2) 1.25rem);
+      }
 
       &:after {
         bottom: 0;
@@ -622,3 +638,68 @@ table {
     color: var(--colour-primary);
   }
 }
+
+// #region Table with actionbar 
+
+iam-table {
+
+  td:has([type="checkbox"]){
+    position: static!important;
+    width: rem(40);
+  }
+
+  input:is([type="radio"],[type="checkbox"]) + label {
+    padding-left: 0!important;
+    margin: 0!important;
+  
+    &:before,
+    &:after {
+      top: 0!important;
+    }
+  }
+
+  table:has([type="checkbox"]:checked) tr:has([type="checkbox"]){
+    
+    cursor: pointer;
+
+    &:is(:hover, :focus) {
+      
+      background: var(--hover-background);
+    }
+
+    td {
+      background: transparent;
+    }
+
+    [type="checkbox"] {
+      width: 100%;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100%;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: -0.75rem;
+    }
+
+  }
+}
+
+@container (width < 23.4375em) {
+
+  iam-table:has([slot="before"]) {
+
+    iam-actionbar {
+      background-color: #e6eaec;
+    }
+    .actionbar__sticky + * {
+      margin-top: 0!important;
+    }
+  }
+
+  .table__wrapper.has-actionbar {
+    margin-top: calc(-100vh - -6.75rem)!important;
+  }
+}
+// #endregion

package/assets/sass/core.scss

@@ -2,5 +2,6 @@
 
 @use "_fonts";
 @use "_corefiles";
+@use '../../assets/sass/components/nav-global.scss';
 @use "_forms";
 @use "_print";

package/assets/sass/error.scss

@@ -2,4 +2,5 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
-@import "_corefiles";
+@import "_corefiles";
+@import '../../assets/sass/components/nav-global.scss';

package/assets/sass/foundations/root.scss

@@ -39,7 +39,7 @@
 }
 
 // Dark mode; functional colours get updated
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
   :root {
     
     @each $color, $value in $dark-mode-colors {
@@ -49,7 +49,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: light) {
+@include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
@@ -72,7 +72,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
   [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2) {

package/assets/sass/main.scss

@@ -2,6 +2,7 @@
 
 @use "_fonts";
 @use "_corefiles";
-@use "_forms";
-@use "_components";
-@use "_print";
+@import '../../assets/sass/components/nav-global.scss';
+@import "_forms";
+@import "_components";
+@import "_print";

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

@@ -132,6 +132,43 @@ class iamActionbar extends HTMLElement {
         });
       }
     }
+
+    // Wtach div for the select inputs
+    if(this.hasAttribute('data-select-watch')){
+
+      const element = document.getElementById(this.getAttribute('data-select-watch'));
+      element.setAttribute('data-select-container','true');
+      Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+        input.parentElement.setAttribute('slot','checkbox');
+      });
+      element.addEventListener('change',(event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('[type="checkbox"]')){
+
+          let count = element.querySelectorAll('input[type="checkbox"]').length;
+          let countChecked = element.querySelectorAll('input[type="checkbox"]:checked').length;
+          that.setAttribute('data-selected', count == countChecked ? "all" : countChecked);
+
+          let input = event.target.closest('[type="checkbox"]');
+
+          if(countChecked){
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+              if(input.closest('iam-card'))
+                input.closest('iam-card').setAttribute('data-selected','true');
+            });
+          }
+          else {
+            Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+
+              if(input.closest('iam-card'))
+                input.closest('iam-card').removeAttribute('data-selected');
+            });
+          }
+          
+        };
+      });
+    }
     // #endregion
 
     // #region switchviews
@@ -385,8 +422,36 @@ class iamActionbar extends HTMLElement {
         
         if(selectAll)
           setSelectAllInput(selectAll, newVal);
-          const event = new CustomEvent("selected", { detail: { selected: newVal } });
-          this.dispatchEvent(event);
+
+        const event = new CustomEvent("selected", { detail: { selected: newVal } });
+        this.dispatchEvent(event);
+
+        if(newVal == "all" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = true;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').setAttribute('data-selected','true');
+          });
+        }
+
+        if(newVal == "0" && this.hasAttribute('data-select-watch')){
+
+          const element = document.getElementById(this.getAttribute('data-select-watch'));
+
+          Array.from(element.querySelectorAll('input[type="checkbox"]')).forEach((input,index) => {
+            
+            input.checked = false;
+
+            if(input.closest('iam-card'))
+              input.closest('iam-card').removeAttribute('data-selected','true');
+          });
+        }
+
         break;
       }
     }

package/assets/ts/components/card/card.component.ts

@@ -37,6 +37,8 @@ class iamCard extends HTMLElement {
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
       </div>
+        
+      <slot name="checkbox"></slot>
       ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
     </div>
     `;
@@ -44,7 +46,7 @@ class iamCard extends HTMLElement {
   }
 
 	connectedCallback() {
-    
+
     this.classList.add('loaded');
     
     // Mimic clicking the parent node so the focus and target events can be on the card
@@ -64,6 +66,13 @@ class iamCard extends HTMLElement {
         card.classList.remove('checked');
     }
 
+    // Click event down
+    this.addEventListener('click', (event) => {
+
+      let clickEvent = new Event('click');
+      card.dispatchEvent(clickEvent);
+    });
+
     card.addEventListener('click', (event) => {
 
       if(parentNode.matches('label[for]')){
@@ -151,7 +160,8 @@ class iamCard extends HTMLElement {
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
       case "data-total": {
-        this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        if(this.shadowRoot.querySelector('.card__total'))
+          this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
       case "class": {

package/assets/ts/components/collapsible-side/README.md

@@ -0,0 +1,38 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/collapsible-side/collapsible-side.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-collapsible-side`))
+    window.customElements.define(`iam-collapsible-side`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-collapsible-side data-title="Configuration">
+        
+  <div slot="menu">
+    <label for="test1">Active branch</label>
+    <select class="form-select" name="test1" id="test1">
+      <option value="1" selected>Newcastle</option>
+      <option value="2">Two</option>
+      <option value="2">Three</option>
+      <option value="2">Four</option>
+    </select>
+  </div>
+
+  <hr slot="menu"/>
+  <a href="/" slot="menu">Agency settings</a>
+  <a href="/" slot="menu">Control panel</a>
+  <a href="/" slot="menu" class="selected">Contact us</a>
+
+  <h1>Inspections</h1>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
+</iam-collapsible-side>
+```

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -0,0 +1,134 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "collapsible side menu"
+});
+
+class iamCollapsibleSideMenu extends HTMLElement {
+
+  constructor(){
+    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 loadCSS = `@import "${assetLocation}/css/components/collapsible-side.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style class="styles">
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="container">
+
+      <div class="side-menu">
+        <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm">Open or close Collapsible menu</button>
+        <div class="side-menu-content closed">
+          <slot name="menu"></slot>
+        </div>
+      </div>
+
+      <div class="main-content">
+        <slot></slot>
+      </div>
+
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const sideMenu = this.shadowRoot.querySelector('.side-menu');
+    const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
+    const mainContent = this.shadowRoot.querySelector('.main-content')
+    const button = this.shadowRoot.querySelector('.side-menu > .btn');
+
+    // Load external CSS if needed
+    if(this.hasAttribute('data-css'))
+      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+
+    // Set sde nav title
+    if(!this.hasAttribute('data-title'))
+      this.setAttribute('data-title','configuration')
+
+    sideMenuContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    mainContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
+    
+
+    if(this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')){
+      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
+      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
+    }
+      
+    // Open the menu
+    button.addEventListener('click', (event) => {
+
+
+      if(!sideMenu.classList.contains('open')){
+
+        sideMenuContent.classList.remove('closed');
+
+
+        setTimeout(function(){ 
+          sideMenu.classList.add('open'); 
+        }, 100);
+
+
+      }
+      else {
+          
+        sideMenu.classList.remove('open');
+        setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      
+        // While the menu is closing dont allow the hover to re-open it until its fully closed.
+        sideMenu.classList.add('pe-none');
+        setTimeout(function(){ sideMenu.classList.remove('pe-none')}, 1000);
+      }
+    });
+
+    // Mimic hover event on desktop so that we can control when classes are set and which order
+    sideMenu.addEventListener('mouseenter', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+
+        sideMenu.classList.add('hover');
+        
+      }
+    });
+
+    sideMenu.addEventListener('mousemove', (event) => {
+
+      if(window.innerWidth > 992){
+
+        if(!sideMenu.classList.contains('open'))
+          sideMenuContent.classList.remove('closed');
+      }
+    });
+
+    sideMenu.addEventListener('mouseleave', (event) => {
+
+      if(window.innerWidth > 992){
+
+        sideMenu.classList.remove('hover');
+
+        if(!sideMenu.classList.contains('open'))
+          setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+      }
+    });
+
+
+
+  }
+
+}
+
+export default iamCollapsibleSideMenu;

package/assets/ts/components/table/table.component.ts

@@ -65,6 +65,10 @@ class iamTable extends HTMLElement {
     classList = classList.replace('table--loading','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
+    // set actionbar class if needed
+    if(this.querySelector('.actionbar__sticky'))
+      this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
+
     this.table = this.querySelector('table');
     this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
     this.pagination = this.shadowRoot.querySelector('.table__pagination');

package/assets/ts/modules/applied-filters.ts

@@ -96,17 +96,14 @@ function createAppliedFilters(container,filters) {
   Array.from(container.querySelectorAll('input[type="checkbox"]:checked')).forEach((input, index) => {
     addFilterButton(filters, input)
   });
-  
-  container.addEventListener('change', function(event){
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
-
-      let input = event.target.closest('input[data-filter-text]');
-
-      addFilterButton (filters, input);
-    };
+  Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {
     
-  }, false);
+    input.addEventListener('change', function(event){
+
+      addFilterButton(filters, input)
+    });
+  });
 
   filters.addEventListener('click', function(event){
 
@@ -136,7 +133,8 @@ function createAppliedFilters(container,filters) {
             input.checked = false;
 
             var event = new Event('force');
-            input.closest('form').dispatchEvent(event);
+            if(!container.hasAttribute('data-nosubmit'))
+              input.closest('form').dispatchEvent(event);
           }
         }
       }

package/assets/ts/modules/dialogs.ts

@@ -36,6 +36,23 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
+      let firstWidth = dialog.offsetWidth;
+      dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+
+      // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
+      Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
+        
+        const id = element.getAttribute('data-duplicate');
+        const originalInput = document.getElementById(id);
+
+        if(element.checked != originalInput.checked){
+
+          element.checked = originalInput.checked;
+          let changeEvent = new Event('change');
+          element.dispatchEvent(changeEvent);
+        }
+      });
+
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         "event": "openModal",
@@ -244,6 +261,7 @@ export const createMultiFormDialog = (dialog) => {
 
   let buttons = "";
   let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+  let form = dialog.querySelector('form');
 
   fieldsets.forEach((fieldset,index) => {
     buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
@@ -258,8 +276,18 @@ export const createMultiFormDialog = (dialog) => {
     if(index != fieldsets.length - 1)
       btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
 
-    if(index == fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    // Last fieldset
+    if(index == fieldsets.length - 1){
+      if(form && form.querySelector(':scope > button[type="submit"]')){
+
+        let existingButton = form.querySelector(':scope > button[type="submit"]');
+        existingButton.classList.add('mb-0')
+
+        btnWrapper.insertAdjacentElement('beforeend',existingButton);
+      }
+      else
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    }  
   });
 
   dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
@@ -359,11 +387,12 @@ export const createMultiFormDialog = (dialog) => {
 
       const button = event.target.closest('button');
 
-      if(event.keyCode == 13){
+      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
         
         event.preventDefault();
         validateFieldset(button);
       }
+
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input')){
@@ -371,13 +400,21 @@ export const createMultiFormDialog = (dialog) => {
 
       input.classList.remove('is-invalid');
 
-
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+      }
     }
   });
 
 
   dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
+      
+      const form = event.target.closest('form');
+      form.classList.add('was-validated');
+    }
+    else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
 
       const button = event.target.closest('button[data-title]');
       validateFieldset(button);

package/assets/ts/modules/helpers.ts

@@ -17,23 +17,6 @@ export const addBodyClasses = (body) => {
     body.classList.add("ie");
   }
 
-  let nav = document.querySelector('nav');
-  if(nav) {
-    let navHeight = nav.offsetHeight;
-    document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-
-    function outputsize() {
-
-      navHeight = nav.offsetHeight;
-      document.querySelector('body').style.setProperty("--nav-height", `${navHeight}px`);
-    }
-    
-    new ResizeObserver(outputsize).observe(nav);
-  }
-  else {
-    document.querySelector('body').style.setProperty("--nav-height", `0px`);
-  }
-
   return null
 }